Civilian Process Book and Specimen

ResearchProcessSpecimenThe End

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8” />

<title>Civilian Process & Specimen Book</title>

</head>

<body>

<nav id=”contents”>

<a href=”#4”>

<a href=”#24”>

<a href=”#68”>

<a href=”#88”>

Designed by Colin M. Ford

Type and Media 2010–2011

P a g E 1 O F 9 8

Civilian is a family of typefaces made not

only for the screen, but specifically for use

on web sites. They incorporate fully half

a year of research and experimentation

and demonstrate what I believe a good

web font should be. The design takes into

account the pixel grid of the screen while

incorporating soft, personable curves to

underline the significance of the individu-

al behind today’s social-oriented web. The

serif is designed to be enjoyable to read

whether the text is short or long, while

the sans is designed to have enough punch

for headlines and legible enough for small

interface items.

I have been building web sites since the

Dot Com Boom, when I was 12. It seems a

little amazing to me that the same hand-

ful of typefaces that I started designing

with in the 7th grade are still the same

typefaces widely used today. Even with

the glut of new typefaces pouring on to

the market, the originals like Verdana,

Georgia, and Lucida Grande still look the

<p>

<h1>

<p>

What is Civilian?

P a g E 2 O F 9 8

best. They were all designed first and only

for the screen. The typefaces making their

way on to web font services today can be

prepped and hinted within an inch of their

lives, but that won’t change the fact that

their original intention lies elsewhere.

Sure, print typefaces can look good on a

screen in the same way a font designed

for a Linotype machine could be made to

look good on a photosetting device, but the

truly great typefaces embrace the technol-

ogy that it is being set with, work with

the constraints of the media, and shine

because of it, not in spite of it. I wanted to

make a typeface that shined on the web.

There are lots of people who like to talk

about what web fonts can and cannot do,

with plenty of conflicting opinions and a

lot of guesswork being done. I chose this

project because I thought that there was

no better setting than Type and Media

to learn from teachers who are basically

creating the field of web type design, to

experiment, to test the boundaries of what

is known, and to draw my own conclu-

sions about what a good typeface for the

web is and what it should do.

<p>

P a g E 3 O F 9 8

Civilian is my exercise in experimenta-

tion, and though it is not perfect quite yet,

I have learned a lot about the field of web

typeface design in the process.

The research section that follows is a

selection of research that I conducted over

the course of the project and helped form

some of the opinions that I now hold in

regards to web type.

<p>

<p>

P a g E 6 O F 9 8

<img>

<div id=”fig1”>

<details> The tops of the letters gathered weight on

the top pixel, a problem that in the end has

no relation to UPM or font metrics.

P a g E 7 O F 9 8

When I started working on my typeface,

I noticed some odd occurrences in the

weight of my typeface. A large amount of

weight was collecting at the top of the let-

ter at some sizes. Paul van der Laan sug-

gested that it might be because of round-

ing errors in my metrics; I was dividing

my UPM of 1000 by 18 pixels, which, objec-

tively, isn’t a nice number. I wasn’t sure it

mattered though, since all my coordinates

were whole numbers (the only kind that

FontLab allows).

As shown in the March 28th draft, how-

ever, I realized that in fact I was trying

to fit 18px inside of 16px when trying to

view it at my target “average size” of 16px,

and when the font was sized up to 18px,

it looked just fine. You can really see the

rasterizer struggling to fit those extra two

pixels in when you zoom in on the tests

(see Figure 2). The 32px one (2×16px) looks

very chaotic, while the 36px one (2×18px)

looks very orderly. What I wanted in my

text sizes is order above all else.

<p>

<p>

<h1> On Font Metrics and Web Fonts

P a g E 8 O F 9 8

Still, the issue of rounding errors kept

bugging me. Miguel Sousa gave a three-

day workshop for the three days after my

talk with Paul, filling my head with even

more numbers and font math. My ques-

tions kept multiplying—Does the UPM

need to be 1000 for the .WOFF to work

Firefox 4 (my target browser)? Does the

.WOFF even generate with a UPM that is

not 1000? Does the mythical value of 2048

UPM work better than any other value?

What if I had a low UPM, like 800? What

about if I had a really super unclean value

for the UPM, like a prime number for in-

stance? I needed to experiment.

…And experiment I did. In my April 3rd

draft, I explored the effects that a UPM

of 800, 937, 1000, 1600 and 2048 had on

a .WOFF. The conclusion that I can draw

from this is that UPM has little or no effect

on the rendering of the outlines of the font.

Rounding errors or remainders don’t have

any say in how the browser displays text.

There are much more important things

that determine how a font looks, such as

how the pixels divide in the em.

<p>

<p>

P a g E 9 O F 9 8

<img alt=”32px”>

<img alt=”36px”>

<div id=”fig2” />

<details> When displaying a font designed for 18px,

if the actual height doesn’t divide evenly,

a chaotic pixel pattern results.

P a g E 1 0 O F 9 8

For instance, a font can have a UPM of

900, with the stems, intended to be 1px

in size when the typeface is set at 9px, at

10 units. The stems will be 1px wide at

9px, but if the font is set at 8px, the stems

would then be less than a pixel wide, caus-

ing a blurry body of text. The ability of

the spaces between the letters effect the

quality of the rendered letters as well.

When Matthew Carter was working on his

screen typefaces for Microsoft he said that

even more important than the outlines

themselves was the “regular spacing” he

applied to them. [1]

If the horizontal metrics of the letters are

rounded to the pixel, (in our 900 UPM font

with pixels being 10×10 units, the widths

would be multiples of 10) all the letters’

stems in a line would render the same.

This is also known as “Quantizing.” The

problem is that the math changes from

size to size. To ensure stems are always at

least 1px, technology like TrueType hint-

ing was invented.

So, if UPM has no effect, you are free to

use any UPM you desire. The drawback of

a larger UPM, however, is that files with

are larger because the distances between

<p>

<p>

<p>

P a g E 1 1 O F 9 8

points are larger, requiring more numbers

to describe them, thus requiring more bits

to describe the additional numbers; [2] in

this experiment the 2048 UPM .WOFF file

was 2.7% larger than the 1000 UPM (1480

bytes and 1440 bytes on disk, respectively).

While a difference of 2.7%, or 40 bytes, is

nothing to worry about with just a few

glyphs in the font, a 2.7% difference at

larger sizes would be a big difference. [3]

Though I wasn’t so sure this percentage

would scale up, so I converted my revival

project to .WOFFs, one at 1000 UPM and

one at 2048. Sure enough, the 2048 .WOFF

was around 14% larger than the 1000

(18,680 and 15,904 bytes respectively). So,

considering that there are no major draw-

backs in regards to the outline rendering

or metrics when having a lower UPM like

800, and there is a fair amount of file size

reduction, it would perhaps be better to

work at a smaller UPM, since as a web

font the file will need to be downloaded

repeatedly.

In a later talk with Luc(as) de Groot, he

mentioned that all of his TrueType fonts

are scaled up to 2048, not because he

subscribes to the magic voodoo cult that

many do in regarding the power of two

<p>

P a g E 1 2 O F 9 8

<p>

number, but because when he converts his

PostScript outlines to TrueType, the higher

the UPM, the more the curve retains its

quality. With web fonts, again it might be

permissible to have a low UPM, because

the quality of the outlines aren’t as appar-

ent as in print.

That said, my typeface was built on the

good old standard, 1000 UPM, and when

converting it to TrueType to hint it I con-

verted it to 2048.

P a g E 1 3 O F 9 8

<cite> [1]

<cite> [2]

<aside> [3]

Carter, Matthew. “Truth to Materials.”

Lecture. TYPO Berlin 2004 “Schrift.” Berlin.

14 May 2004. TYPO Berlin Videoblog.

FontShop International, 02 Dec. 2009.

Web. 3 apr. 2011. <http://www.typoberlin.

de/video/index.php?node_id=9&lang_

id=1&scope=front&ds_target_id=841>.

Twardoch, adam. Reply to “UPM Value

of 1000 Set in Stone?” Typophile

Thread. Typophile, 13 May 2009. Web.

4 apr. 2011. <http://typophile.com/

node/30913#comment-346732>.

It’s worth noting that .WOFFs are already

compressed, and even though they are 4kb

on disk, they are effectively compressed to

1.4kb in the browser, and the 1480 byes of

the 2048 UPM file is already a huge reduction

from the 2240 bytes of the 2048’s .OTF file.

P a g E 1 4 O F 9 8

As I started to choose what family I want-

ed to represent through my thesis, I began

to keep up a spreadsheet that would cata-

log how blogs across genres and nationali-

ties used typefaces as they are. I looked in

to what family they used for their regular

body text, whether or not they used italics

or bold, and how they were all respec-

tively used. If there were any extra fonts

used in conjunction to their regular font,

I cataloged them as well. I found that big,

punchy sans serifs were often used for

headlines, serifs with bold and italic in the

text of the document, and a regular sans

serif for interface items like sidebar navi-

gation and captions. Rarely did web sites

use more than one typeface, which was a

shock to me.

The italic of the second font was only used

once in my sample selection, and thus

isn’t included in the chart.

<p>

<p>

<h1> Research into the use of Typefaces on the Web

<table>

P a g E 1 5 O F 9 8

Blo

g n

am

eB

log

ad

dre

ss

Ma

in F

on

tU

se

d a

s

Zen

Hab

its

zenhab

its.

net

Hoe

fler

Tex

tTe

xt

Po

st S

ecre

tpos

tsec

ret.

com

Treb

uchet

Hea

dlin

e, t

ext

Clim

ate

Pro

gre

ssth

inkp

rogr

ess.

org

Treb

uchet

Hea

dlin

e, t

ext,

Nav

igat

ion

HiL

ob

row

hilo

bro

w.c

omLu

cid

a g

rand

eH

ead

line,

tex

t, N

avig

atio

n

Hip

ster

Ru

no

ffhip

ster

runof

f.co

mH

elve

tica

Hea

dlin

e, t

ext,

Nav

igat

ion

Ko

ttk

eko

ttke

.org

Myr

iad

Pro

Hea

dlin

e, t

ext,

Nav

igat

ion

Th

e A

wl

thea

wl.c

omLu

cid

a g

rand

eTe

xt, N

avig

atio

n

Th

e O

atm

eal

theo

atm

eal.c

omg

eorg

iaTe

xt, N

avig

atio

n

Sh

it M

y K

ids

Ru

ined

shit

myk

idsr

uined

.com

Ver

dan

aH

ead

line,

Tex

t, N

avig

atio

n

Dea

dlin

e H

oll

yw

oo

dd

ead

line.

com

/hol

lyw

ood

Ver

dan

aTe

xt

Ev

eryth

ing

Ev

eryw

her

eev

eryt

hin

g-ev

eryw

her

e.co

ma

rial

Hea

dlin

e, T

ext,

Nav

igat

ion

Th

e S

art

ori

alist

thes

arto

rial

ist.

blo

gspot

.com

geo

rgia

Hea

dlin

e, T

ext,

Nav

igat

ion

Bo

ing

Bo

ing

boi

ngb

oing.

net

Hel

veti

ca N

eue

Hea

dlin

e, T

ext,

Nav

igat

ion

Th

e D

aily K

itte

nd

aily

kitt

en.c

omLu

cid

a g

rand

eH

ead

line,

Tex

t, N

avig

atio

n

Sh

orp

ysh

orpy.

com

geo

rgia

Hea

dlin

e, T

ext,

Nav

igat

ion

Ap

art

men

t T

her

ap

yap

artm

entt

her

apy.

com

Ver

dan

aTe

xt, N

avig

atio

n

Pit

chfo

rkhtt

p:/

/pit

chfo

rk.c

omLu

cid

a g

rand

eH

ead

line,

tex

t

<table>

P a g E 1 6 O F 9 8

Blo

g n

am

eB

old

?U

se

d a

sI?

Us

ed

as

Zen

Hab

its

No

--N

o--

Po

st S

ecre

tY

esH

ead

line

Yes

Blo

ckquo

te

Clim

ate

Pro

gre

ssY

esH

ead

line

Yes

Blo

ckquo

te

HiL

ob

row

Yes

Hea

dlin

eN

o--

Hip

ster

Ru

no

ffY

esH

ead

line,

sub

hea

d, si

deb

ar li

nks

Yes

Blo

ckquo

te

Ko

ttk

eY

es1

Spon

sore

d li

nk/

adve

rtis

emen

tN

o--

Th

e A

wl

Yes

Nav

igat

ion

Sla

nt

Dat

es

Th

e O

atm

eal

No

--N

o--

Sh

it M

y K

ids

Ru

ined

Yes

Hea

dlin

es, S

ideb

arN

o--

Dea

dlin

e H

oll

yw

oo

dY

esLi

nks

Yes

Titl

es a

nd

art

icle

Nam

es

Ev

eryth

ing

Ev

eryw

her

eY

esH

ead

line

Yes

Blo

ckquo

te, im

age

capti

ons

Th

e S

art

ori

alist

No

--Y

eson

e si

ngl

e lin

k

Bo

ing

Bo

ing

Yes

Hea

dlin

es, N

avig

atio

nY

esTi

tles

and

art

icle

Nam

es

Th

e D

aily K

itte

nY

esTe

xt e

mphas

is, H

ead

lines

No

--

Sh

orp

yY

esLi

nks

No

--

Ap

art

men

t T

her

ap

yY

esTe

xt e

mphas

isY

esTe

xt E

mphas

is, ti

tles

Pit

chfo

rkY

esH

ead

lines

, su

bhea

ds,

art

ist

nam

esS

lant

Titl

es a

nd

Nam

es

<table>

P a g E 1 7 O F 9 8

Blo

g n

am

eO

the

r fo

nts

Us

ed

as

Bo

ld?

Us

ed

as

Zen

Hab

its

Hel

veti

caH

ead

line,

nav

igat

ion

Yes

Nav

igat

ion

Po

st S

ecre

t--

----

--

Clim

ate

Pro

gre

ss--

----

--

HiL

ob

row

----

----

Hip

ster

Ru

no

ff--

----

--

Ko

ttk

e--

----

--

Th

e A

wl

geo

rgia

Hea

dlin

esY

esH

ead

lines

Th

e O

atm

eal

----

----

Sh

it M

y K

ids

Ru

ined

geo

rgia

Entr

y d

ates

No

--

Dea

dlin

e H

oll

yw

oo

da

rial

, g

eorg

ia, Ti

mes

Hea

dlin

es, N

avig

atio

nY

esH

ead

lines

, N

avig

atio

n

Ev

eryth

ing

Ev

eryw

her

e--

----

--

Th

e S

art

ori

alist

Treb

uchet

Sub

hea

ds,

Met

adat

aN

o--

Bo

ing

Bo

ing

----

----

Th

e D

aily K

itte

n--

----

--

Sh

orp

y--

----

--

Ap

art

men

t T

her

ap

yLu

cid

a g

rand

e, g

eorg

iaH

ead

lines

, N

avig

atio

nN

o--

Pit

chfo

rkg

eorg

iaN

avig

atio

nN

o--

<table>

P a g E 1 8 O F 9 8

More than a few people I’ve talked to have

responded to my thesis with puzzled looks.

“Why design a typeface specifically for the

web?” they ask. “Screen resolution is going

up, and soon you will be able to use any

typeface on a screen like you would do for

print. Resolution won’t matter anymore!”

These people usually point to the iPhone 4

in their pocket and its 326ppi screen.

First of all, I would like to point out that

saying this is akin to saying that the reso-

lution of your printer doesn’t matter, and

we all know that isn’t true. Second, I have

been working in relatively the same reso-

lution since I was a child, so I had a hunch

that resolution wasn’t improving as quick

as some people may think.

A little while ago, I came across David

Berlow’s 2008 Typo Berlin talk. He goes

off on a couple of tangents, so forgive the

editing, but here is the jist of the relevant

section of his talk:

<p>

<p>

<p>

<h1> The Growth of Screen Resolution over Time

P a g E 1 9 O F 9 8

“And another famous ‘anti-cogitation’

that I got was ‘Resolution is going up,

you idiot! It’s just going to go right

through the roof and no one is going

to need any of this stuff!’ Well, that’s

great, and I’ve seen it on my iPod, on

my iPhone. In fact, I started this project

because my iPod had better fonts on it

than my macintosh. And I thought that

that was kind of.. weird.

“So, resolution has gone from 72 to 96

over 20 years. Congratulations. Uh, for

most people, that’s about the resolu-

tion they’re going to get. That’s one

issue. ... And the third problem about

resolution is—how many of you have

a television set? So, everyone has a

television set, you know what the

resolution of your television set is? It’s

around 80 DPI. Just about all of them

are 80 DPI. So there’s this enormous

installed base of resolution that doesn’t

need to be any higher than that. You

can do everything on your television

that you can imagine—it’s high enough

resolution, nobody’s complaining, and

they’re certainly not going to have this

universal jump to 200 DPI for everyone

in the world, just for type. That’s never

<blockquote>

2011

1987

PP

I

62

.5

128

.65

89

.93

aV

g

1993

1990

1999

1996

2002

2005

2008

<canvas>

P a g E 2 1 O F 9 8

happened before. Nobody’s ever said,

‘well, we need better typography, we

need higher resolution for everybody

so we’re going to make it so a third of

the graphics on the web no longer work

because they’re too small, we’re going

to make it so everyone has to buy a

new television, or have an incredibly

expensive processor in their television

to deal with all this resolution...’ It’s

not going to happen. People see every-

thing on television just perfectly.

“Even if you go to high resolution, there

are going to be people in low resolution

for a long time.”

“When Microsoft first suggested I work

on some screen fonts, I said no, no, no,

this is philosophically a terrible mis-

take. I quoted the experiences I quoted

to you, where I had designed various

self-obsoleting typefaces. But they

said, you can relax, because screen

resolutions are NOT going to get better,

within 10 or 20 years. So I sort of said,

‘OK, I’ll be happy to do it.’”

<p>

<blockquote>

This is very similar in Matthew Carter’s

Typo Berlin talk from 4 years earlier:

P a g E 2 2 O F 9 8

Of course, we know about the iPhone, and

it is an oft-cited example by these people

I talk to who believe that resolution is

increasing—one day before iPhone 4 the

resolution was 165 PPI, and one day after,

it was suddenly 326 PPI. And the screen

does look amazing. But it is only one

device, and even if everything goes accord-

ing to Steve Jobs’ secret plan for the next

20 years, still not everyone will be walk-

ing around with that many pixels in

their pocket.

When making a web site for a broad audi-

ence, the rule among programmers has al-

ways been to cater to the least advantaged.

If 30% of the browser market still doesn’t

support the HTML5 video element, then

you develop your web site without that

element. This will still be true for screens

as well—just like there are people hanging

on to IE6, in 20 years there will be people

still hanging on to 80 PPI monitors.

To illustrate my findings, I made a graph.

It records along the x axis the years since

1987, and along the y axis the highest PPI

of the screens that were released that year.

My research only included Apple displays

because (1), the history and details of

<p>

<p>

<p>

P a g E 2 3 O F 9 8

Apple products has been well-kept thanks

to their fanatical fanbase (thanks specifi-

cally to the app Mactracker), and (2) while

it can be agreed upon that Apple occupies

the higher end of the display market, they

are hardly outliers in the display resolu-

tion area. Graph on the previous spread.

<cite> Page, Ian. Mactracker. Computer software.

Mactracker. Vers. 6.0.2. 2011. accessed 28

May 2011. <http://www.mactracker.ca/>.

P a g E 2 6 O F 9 8

I began to design by spending a part of

a week working on a process blog, from

which most of the commentary in the

proceeding section comes from. I wanted

to remind myself how a typeface might aid

in the actual design of a web interface like

a blog; I saw how the process exists now,

and how the process might be improved

upon.

To overview the process of designing

Civilian, I started with the regular weight,

spent a long time figuring out the style I

wanted and deciding on technical issues,

and then built it out into a bold, then an

italic, then a sans and a sans bold, then

ditched the italic, added some icons, and

then finally made another italic.

<p>

<p>

<h1> Start of the Design Process

P a g E 2 7 O F 9 8

<img>

<div id=”fig1”>

<details> thesis.colinmford.com served as my online

notebook for thoughts, quotes from my

teachers, drafts, and research.

P a g E 2 8 O F 9 8

<img>

<div id=”early-sketches”>

<details> Top: First digital sketches, February

Right: Interpolation sketches, March

P a g E 2 9 O F 9 8

P a g E 3 1 O F 9 8

For all intents and purposes, my design

began with pixels. In the overleaf there are

some sketches, but they felt unfounded to

me, like I was trying to build a skyscraper

on sand instead of bedrock.

For my first sketches I was guessing what

character shapes might allow the best pix-

el placement. For the interpolation sketch-

es, I was trying to find a good weight and

width to start with. What I found was that

the spacing, which I thought was fairly

loose was actually tight, the serifs which

I thought were long were actually short,

and that it was important not to be subtle.

I was lost until I came across this inter-

view with Matthew Carter about how he

began his Microsoft typefaces:

<p>

<p>

<p>

<h1> Sketching with Pixels

“In the past I’ve been burned starting

from outlines and trying to be extra

clever in the hinting. So I finally decid-

ing, ‘I’m better off grasping the nettle.

<blockquote>

P a g E 3 2 O F 9 8

P a g E 3 3 O F 9 8

What’s most important is to get the

bitmaps right at the sizes people use

most often.’

“So instead of starting with outlines

and then working to hint them for the

screen, I started by simply making bit-

map fonts. No outlines, just bitmaps.

“Bitmaps are relatively easy to make

and they show exactly how the fonts

will look on-screen. This allowed us to

make decisions about sizes, weights,

and distinctions between serif, sans,

roman, italic, all viewed in context.

Working this way we came up with a

definition for a certain number of criti-

cal sizes and weights.

I thought of pixel sketching much like the

broad nib or pointed pen exercises that we

learned to do in the beginning of the year

—learning that, when you create a letter,

you should always be aware of the under-

lying model. Just in this case, the underly-

ing model wasn’t made from ink, it was

made with pixels.

This way of sketching continued to be

helpful far into the development of the

<p>

<p>

P a g E 3 4 O F 9 8

project. If I couldn’t figure out how the

pixels should lie in a particular character,

I would go back to sketching, develop the

character, and then bring it back to Font-

Lab and interpret the outlines.

I chose to sketch at 16px, a size that is

common on the internet. I thought it to be

a comfortable reading size; a little bigger

than normal, but in my opinion most text

on the web is too small anyway.

<cite> Will-Harris, Daniel. “georgia & Verdana

- Typefaces for the Screen - www.will-

harris.com.” Will-Harris Studio. 7 Nov.

1997. Web. 26 June 2011. <http://www.

will-harris.com/verdana-georgia.htm>.

<p>

P a g E 3 5 O F 9 8

After showing my pixel-based

drafts to Petr van Blokland, he

told me that I should set the

side bearings of the letters to

be whole pixels as well as the

stems of the letters and the verti-

cal metrics so I would get even

subpixel rendering on the stems.

I tried this, but it was difficult

to space the letters convincingly,

and ultimately opted to go back

to standard horizontal metrics.

<p>

<h3> Quantizing

Easily the most handy thing

that I learned in the first semes-

ter is how to write Python and

use RoboFab to my advantage.

Learned that if a task is repeat-

able, it is programmable, and

that programs could extend your

ability as a typeface designer.

For instance, I wrote a script that

generates a .WOFF directly from

FontLab by accessing the com-

mand line so that I could quickly

proof my designs in the browser.

For those proofs, I used

JavaScript to generate a desired

text in multiple sizes, or to gen-

erate a quick side-by-side charac-

ter comparison.

<p>

<h3> Coding

<p>

P a g E 4 0 O F 9 8

@font-face {

font-family: 'Civilian';

src: url('Civilian.woff');

font-weight: 400;

font-style: normal;

}

@font-face {

font-family: ”Civilian”;

src: url(”Civilian-Bold.woff”);

font-weight: 700;

font-style: normal;

}

@font-face {

font-family: ”Civilian”;

src: url(”Civilian-Italic.woff”);

font-weight: 400;

font-style: italic;

}

@font-face{

font-family: ”Civilian Sans”;

src: url(”Civilian-Sans.woff”);

font-weight: 400;

font-style: normal;

}

@font-face{

font-family: ”Civilian Sans”;

src: url(”Civilian-Sans-Bold.woff”);

font-weight: 700;

font-style: normal;

}

P a g E 4 1 O F 9 8

Civilian was built to be implemented

through CSS. It’s not that different from

planning a normal family, but some spe-

cific details need to be taken in to account.

For instance, CSS3 at present only allows

for 9 weights, from 100 to 900, and each

can have an italic or oblique variant. In a

separate part of the CSS code, it is easy to

hook up the <strong> tag to call the bold

weight, and <em> to call the italic. How-

ever, there is no way to specify separate

styles in a family yet, so Civilian Sans has

to be called as a different family, with its

own bold.

Civilian also has OpenType features that

can be accessed in Firefox 4+. By activat-

ing font-feature-settings: ”lnum” on; a user

can access the lining numbers and punc-

tuation coded into the font. In Civilian

Symbols, activating font-feature-settings:

”liga” on; will allow easy access to icons

that don’t have unicode values by typing,

for instance (location) for �..

<p>

<p>

<h1> Civilian Family Planning

P a g E 4 2 O F 9 8

Civilian is a low-contrast (but not no

contrast) slab serif with lots of broad nib

influence. When researching the field of

similar typefaces, I noticed that the slight

calligraphic influence that Civilian has

would make it fairly unique in its genre. I

decided upon making it low contrast when

looking really carefully at serifs when set

at small sizes on screen, as they all reduce

to low-contrast slab serifs anyway. I felt

that attempting to make any other sort of

design, only to have it drastically changed

when it is set small, was ultimately futile.

I also wanted a typeface that referenced

the human being behind the content on

every “social media” web site, should my

typeface family be used on them. Rather

than soullessly generated, most of the

content on the internet has been typed out

by human hands, thought up in human

brains, so I thought that a typeface with a

little bit of humanity would be appropriate.

<p>

<p>

<div> Regular

@font-face Civilian Serif

P a g E 4 3 O F 9 8

P a g E 4 4 O F 9 8

low contrast

ascender and cap height the same


P a g E 4 5 O F 9 8

calligraphic features

very high x-height

P a g E 4 6 O F 9 8


<div id=”regular-progress”>

<img>

<march 26>

<april 3>

<april 7>

P a g E 4 7 O F 9 8

<april 19>

<may 2>

<may 9>

<june 1>

P a g E 4 8 O F 9 8

The Civilian family comes with short-

ranging and lining figures both complete

with matching punctuation. The default,

short-ranging, are like so-called “Old-

Style” figures in that they mimic the

rhythm of the lowercase, but they don’t de-

scend as far, and don’t seem as delicate as

full “Old-Style” figures do in text, and are

more suited for informal subjects matter.

The lining figures and punctuation work

perfectly with all-caps settings and for

typesetting data.

<p>

<h3> Short-Ranging Figures


P a g E 4 9 O F 9 8

<canvas>

<details> Short-ranging figures mimic the rhythm

of the lowercase, without actually going

all the way to the descender. Their “x” is

also higher than the standard x-height.

<div id=”lnum”>

P a g E 5 0 O F 9 8

The only way to make a bold have enough

contrast with the regular is to really

punch it up. The weight contrast between a

regular and a bold on the web is more akin

to a regular and a black weight in print.

The stems of the bold are 250%–300% the

thickness of the roman, and in order to

manage that kind of weight, the contrast

in the stroke is much higher as well.

<p>

<strong> Bold


P a g E 5 1 O F 9 8

P a g E 5 2 O F 9 8

The aim of the italic was to make it as no-

nonsense as possible, without losing the

character of the roman construction that I

had developed for the regular. I had tried

various cursive constructions (described

by a few critiquers as “angry-looking”)

but the difference in construction was not

only abnormal for a slab-ish typeface, but

the visual noise that the construction was

making was too much to be read on screen.

So, like Georgia's italic, I placed my stroke

joins high up or fairly low on the x-height,

keeping the middle clear and legible. The

15° slant is fairly extreme, but it creates a

nice pixel pattern for the stems (one over

three) and more importantly gives a suf-

ficient contrast in text from the roman.

<p>

<em> Italic


P a g E 5 3 O F 9 8

P a g E 5 4 O F 9 8

<may 4> <may 18>

<may 26>

<june 1> <current>


<div id=”italic-progress”>

<img>

The italic started off being more cursive,

but slowly worked its way back to a more

conventional construction.

<description>

P a g E 5 5 O F 9 8

<img>

At the end of May I created a Bold Italic to

help me figure out how to make the italic.

Ultimately it remains unfinished but it

was a useful technique.

<description>

P a g E 5 6 O F 9 8

Unlike an image, an icon typeface is scal-

able, allowing multiple uses at multiple

sized with only one download. This would

allow for interfaces that involve things

enlarging, or the user zooming in, with-

out pixilation or problems. Being text,

their colors could easily be dynamically

changed. Their edges also wouldn't have

to have any solid background or dithering;

whereas images that are capable of trans-

parent backgrounds like GIFs or PNGs

always need to have a background color

to provide anti-aliasing, resulting often

in images that have a transparent back-

ground but a white “halo,” the edges of the

icons will conform to whatever is behind

it, just like text does. Additionally, unlike

vector graphics available on the web like

SVGs, icons in fonts would benefit from

subpixel rendering and even hinting (if it

is provided) when at small sizes—whereas

SVGs only get a grayscale anti-aliasing.

Design-wise, it is simply quicker to have

icons that match the style of the typeface,

and align perfectly to the metrics.

<p>

<span> Symbols


P a g E 5 7 O F 9 8

P a g E 5 8 O F 9 8

The sans is the more serious brother to

the serif. I started with chopping the serifs

off Civilian serif, but then I reduced the

stroke contrast even further and made

some construction changes to some key

letters. The upper and lowercase k's have

been changed to their “carpenter-con-

structed” forms, the y, j and Q have less

curve to their tails, the g has been made to

be subtly more geometric and the middle

of the M now touches the baseline. As an

addition, the ends of the strokes have been

rounded so as to not entirely abandon the

friendly nature of the strokes that Civilian

serif has.

<p>

<h1> Sans Regular

@font-face Civilian Sans

P a g E 5 9 O F 9 8

P a g E 6 0 O F 9 8

IJKMRQ&£

gjky

<div class=”civ-serif”>


P a g E 6 1 O F 9 8

IJKMRQ &£

gjky

<div class=”civ-sans”>

P a g E 6 2 O F 9 8

The role of the sans bold is mainly to be

used for headlines, and in some instances

to provide a visual contrast with the sans

it is used in navigation. Big, black, and

blocky, it also shares the subtle rounding

that the sans has. Like Civilian serif’s bold,

there is a contrast increase in the stroke to

manage the heaviness of the stems.

<p>

<h1> Sans Bold


P a g E 6 3 O F 9 8

Finally, in the end, I opted for

TrueType hinting. Through my

research I discovered that PS

hints had no effect on the appear-

ance of text on the web, and even

on OSX, which most people say

ignores hints, it seems that the

presence of vertical hints helps

to even out the vertical of the

family, and prevent what I like

to call “snow caps,” or grayish

pixels on the top of the letters,

from collecting.

As I didn't have much time to do

the hinting, the TrueType hints

were generated automatically

and tweaked where necessary at

12px and 16px.

<p>

<h3> Hinting

<p>

P a g E 6 5 O F 9 8

P a g E 6 6 O F 9 8

The screen is an interesting medium to

design for. It is difficult to manage weight

on screen because of the limited resolu-

tion and the full-fuzz rasterizer. Because

of the rounding that takes place when the

face gets smaller to fit it on the pixel grid,

stroke weight modulation is often reduced

to the same line of blurry pixels. At the

same time, at Christoph Noordzij’s urg-

ings, I included details in Civilian that,

when blown up to enormous sizes (as is a

trend on the web these days) the typefaces

would still look interesting.

It was important to me that Civilian not

look like it was simply made from the

pixels that I sketched. I wanted a personal-

ity and a character to Civilian’s serif that

hints at the humanity of the person behind

the words written on the web site. These

days on the web, even with the preva-

lence and implied importance of “social

networking,” it is often easy to forget that

most things on the web are generated by

people, and not faceless programs.

<p>

<p>

<h1> Comments on Civilain’s Design

P a g E 6 7 O F 9 8

I learned that typefaces with stem widths

at just around 1 pixel when at their in-

tended PPM are hard to control. Often the

stems would land in the middle of two

pixels, creating a blurry stem. When I re-

did the design of my typeface, I increased

the stem widths to be wider than a pixel

at my intended PPM (16px, or 1em in css

parlance), giving the typeface more of a

chance to land on a pixel; I increased the

size of the bull’s-eye, so to speak.

With a bold made for print, it is highly

unusual for the stems to increase 200%

from the regular. For my typeface, to give

enough typographic contrast, I found it

necessary through experimentation that

the bold of a screen typeface should have

stems roughly 250% the thickness of the

regular, so designing Civilian’s bold was

more like designing a regular and a black

than a regular and a bold.

<p>

<p>

<img>

P a g E 6 8 O F 9 8

I learned a similar lesson for the italic. A

slant of 15° would be fairly extreme in

print, but it was wholly necessary for my

italic to provide enough typographic con-

trast. I also had tried a fairly cursive con-

struction with my italic—mostly because I

wanted to try it—but it ended up being all

wrong. Paul van der Laan pointed out that

the construction of Georgia is very sub-

dued, with the joins being very high or

low on the letter, without a lot of funny

stuff. So, I endeavored to make a no-non-

sense italic.

At one point I intended to get rid of the

italic altogether, and the sans and the sans

bold rose from that intention. I wasn’t

having much luck with my italic and I

thought that a sans and a big, punchy

sans bold would have been a better use of

my time for blog headlines. However, the

<p>

<p>

15°

P a g E 6 9 O F 9 8

more that I considered it, the more I con-

ceded that if my typeface was going to be

seriously used for text setting on the web,

an italic was necessary, at least in the

serif. For the sans, which is used more for

interface items, an italic is less necessary

and could be added later.

Finally, I initially intended to add more

icons than I have added so far to Civil-

ian. There are various iconographic tropes

that are quickly becoming an international

language for the web—a magnifying glass

for “search,” a gear for “settings,” a house

for “home page.” Including icons like these

in a typeface, which match the metrics and

style of the typeface itself, have various

technical and design advantages.

Civilian might not have all the cool type-

face features I intended it to have when

I was starting out, but I’m glad that most

of my time was spent on figuring out

just what to do and how to deal with this

whole new medium. Those features, like

alternate characters and more ligature

support, will be added eventually, and as

more browsers allow designers to access

OpenType features through CSS code, they

will be able to be enjoyed by more people.

<p>

<p>

P a g E 7 2 O F 9 8

You’ve been reading Civilian all through-

out this book, but you haven’t been read-

ing it how it was originally intended.

Civilian is a web typeface and mainly only

intended to be viewed on the screen, spe-

cifically in a browser like

Firefox. So, you might think that printing

it out on good old fashioned dead trees

might seem a little silly, and you’d mostly

be correct.

In the following pages I try to give as

many screen shots as possible to give you

the idea of what Civilian looks like on the

screen, but you really haven’t seen any-

thing until you fire it up in your browser.

So, when you’re able to, head on over to

colinmford.com to see the real thing.

<p>

<p>

<p>

<h1> A Word about this Specimen...

P a g E 7 4 O F 9 8

<lowercase>

<uppercase>

<figures>

<misc>

a b c d e f g h i j k l m n o p q r s t u v w x y z

à á â ã ä å ā ă ą æ ǽ ç ć ĉ č ċ ď ð đ è é ê ě ë ē ĕ

ė ę ĝ ğ ġ ģ ĥ ħ ı ì í î ï ĩ ī ĭ į ĳ ĵ � ķ ĺ ļ ľ ŀ ł ñ ń ņ ň

ò ó ô õ ö ō ŏ ő œ ø ǿ þ ŕ ŗ ř ś ŝ š ş ș ß ţ ť ù ú û ü

ũ ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ÿ ŷ ź ż ž

A B C D E F G H I J K L M N O P Q R S T U V

W X Y Z À Á Â Ã Ä Å Ā Ă Ą Æ Ǽ Ç Ć Ĉ Č Ċ Ď

Ð Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ I Ì Í Î Ï Ĩ Ī Ĭ Į

Ĳ Ĵ � Ķ Ĺ Ļ Ľ Ŀ Ł Ñ Ń Ņ Ň Ò Ó Ô Õ Ö Ō Ŏ Ő Œ

Ø Ǿ Þ Ŕ Ŗ Ř Ś Ŝ Š Ş Ș ẞ Ţ Ť Ù Ú Û Ü Ũ Ū Ŭ Ů

Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ÿ Ŷ Ź Ż Ž

0 1 2 3 4 5 6 7 8 9 � � � 3 � 5 � � � �

$ � ¢ � € � £ £ ¥ � § � ¶ � ¤ # # % % ‰ ‰ ° °

[ ] � � ( ) � � { } � � ÷ � × � – � + � ± � = � ≠ � ≈ � > > < �

¡ ! ¿ ? & @ * † ‡ ~ - – — . , : ; ‘ ’ � ‚ " “ ” „ “ › ‹ » «

• … / \ | ` ´ ˇ � ˆ ˘ ˝ ¨ ˙ ˜ ¯ ˚ ¸ ˛ · ª º � � � � ⁱ � � ⁿ � � �

® © � ™ ℠

Serif Regular

P a g E 7 5 O F 9 8


à á â ã ä å ā ă ą æ ǽ ç ć ĉ č ċ ď đ è é ê ě ë ē ĕ

ė ę ĝ ğ ġ ģ ĥ ħ ı ì í î ï ĩ ī ĭ į ĳ ĵ � ķ ĺ ļ ľ ŀ ł ñ ń ņ

ň ò ó ô õ ö ō ŏ ő œ ø ǿ þ ŕ ŗ ř ś ŝ š ş ș ß ţ ť ù ú

û ü ũ ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ÿ ŷ ź ż ž


W X Y Z À Á Â Ã Ä Å Ā Ă Ą Æ Ǽ Ç Ć Ĉ Č Ċ

Ď Ð Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ I Ì Í Î Ï Ĩ

Ī Ĭ Į Ĳ Ĵ � Ķ Ĺ Ļ Ľ Ŀ Ł Ñ Ń Ņ Ň Ò Ó Ô Õ Ö Ō

Ŏ Ő Œ Ø Ǿ Þ Ŕ Ŗ Ř Ś Ŝ Š Ş Ș ẞ Ţ Ť Ù Ú Û Ü

Ũ Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ÿ Ŷ Ź Ż Ž

0 1 2 3 4 5 6 7 8 9 � � � � � � � � � �

$ � ¢ � € � £ � ¥ � § � ¶ � ¤ # # % ‰ °

[ ] � � ( ) � � { } � � ÷ × – + ± = ≠ = ≈ > <

¡ ! ¿ ? & @ * † ‡ ~ - – — . , : ; ‘ ’ � ‚ " “ ” „ “ › ‹ » «

• … / \ | ` ´ ˇ � ˆ ˘ ˝ ¨ ˙ ˜ ¯ ˚ ¸ ˛ · ª ª ® ©� ª ª

<lowercase>

<uppercase>

<figures>

<misc>

Serif Bold

P a g E 7 6 O F 9 8

P a g E 7 7 O F 9 8

P a g E 7 8 O F 9 8


à á â ã ä å ā ă ą æ ǽ ç ć ĉ č ċ ď ð đ è é ê ě ë ē ĕ

ė ę ĝ ğ ġ ģ ĥ ħ ı ì í î ï ĩ ī ĭ į ĳ ĵ � ķ ĺ ļ ľ ŀ ł ñ ń ņ ň ò

ó ô õ ö ō ŏ ő œ ø ǿ þ ŕ ŗ ř ś ŝ š ş ș ß ţ ť ù ú û ü ũ

ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ÿ ŷ ź ż ž ff ffi fi


W X Y Z À Á Â Ã Ä Å Ā Ă Ą Æ Ǽ Ç Ć Ĉ Č Ċ Ď

Ð Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ I Ì Í Î Ï Ĩ Ī

Ĭ Į Ĳ Ĵ � Ķ Ĺ Ļ Ľ Ŀ Ł Ñ Ń Ņ Ň Ò Ó Ô Õ Ö Ō Ŏ Ő

Œ Ø Ǿ Þ Ŕ Ŗ Ř Ś Ŝ Š Ş Ș ẞ Ţ Ť Ù Ú Û Ü Ũ Ū Ŭ

Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ÿ Ŷ Ź Ż Ž

0 1 2 3 4 5 6 7 8 9 � � � � � � � � � �

$ � ¢ � € � £ � ¥ � § � ¶ � ¤ # # % ‰ °

[ ] � � ( ) � � { } � � ÷ × – + ± = ≠ = ≈ > <

¡ ! ¿ ? & @ * † ‡ ~ - – — . , : ; ‘ ’ � ‚ " “ ” „ “ › ‹ » «

• … / \ | ` ´ ˇ � ˆ ˘ ˝ ¨ ˙ ˜ ¯ ˚ ¸ ˛ · ª ª ® ©� ª ª

<lowercase>

<uppercase>

<figures>

<misc>

Serif Italic

P a g E 7 9 O F 9 8


a B C D E F g H I J K L M N O P Q R S T U

V W X Y Z

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9

$ � ¢ � € � £ £ ¥ � § � ¶ � ¤ # # % ‰ °

[ ] � � ( ) � � { } � � ÷ × – + ± = ≠ � ≈ > <

¡ ! ¿ ? & @ * † ‡ ~ - – — . , : ; ‘ ’ � ‚ ” “ ” „ “

› ‹ » « • … / \ |

<lowercase>

<uppercase>

<figures>

<misc>


A B C D E F G H I J K L M N O P Q R S T U

V W X Y Z

0 1 2 3 4 5 6 7 8 9 � � � � � � � � � �

$ � ¢ � € � £ � ¥ � § � ¶ � ¤ # # % ‰ °

[ ] � � ( ) � � { } � � ÷ × – + ± = ≠ � ≈ > <

¡ ! ¿ ? @ * † ‡ ~ - – — . , : ; ‘ ’ � ‚ " “ ” „ “

› ‹ » « • … / \ |

<lowercase>

<uppercase>

<figures>

<misc>

Sans Regular & Bold

<short-ranging figures>

P a g E 8 2 O F 9 8P a g E 8 2 O F 9 8

fon

tsin

use

.co

m

Fon

ts I

n U

se –

IC

P a g E 8 3 O F 9 8P a g E 8 3 O F 9 8

P a g E 8 4 O F 9 8P a g E 8 4 O F 9 8

gu

ard

ian

.co

.uk

Late

st N

ews,

Co

P a g E 8 5 O F 9 8P a g E 8 5 O F 9 8

P a g E 8 6 O F 9 8P a g E 8 6 O F 9 8

en.w

ikip

edia

.org

Wik

iped

ia,

the

fr

P a g E 8 7 O F 9 8P a g E 8 7 O F 9 8

P a g E 8 8 O F 9 8P a g E 8 8 O F 9 8

med

ia.t

wit

ter.

com

/new

sro

om

s/

Tw

itte

r fo

r N

ews

P a g E 8 9 O F 9 8P a g E 8 9 O F 9 8

P a g E 9 0 O F 9 8P a g E 9 0 O F 9 8

med

ia.t

wit

ter.

com

/new

sro

om

s/

Tw

itte

r fo

r N

ews

P a g E 9 1 O F 9 8P a g E 9 1 O F 9 8

P a g E 9 4 O F 9 8

P a g E 9 5 O F 9 8

Making Civilian has been a rollercoaster

ride. There have been exciting heights and

frustrating lows. Though, I know now that

the ride isn’t quite over yet; I’ve dropped

from the first hill and am currently sitting

at the bottom, looking up at the second.

I had many ideas for Civilian that haven’t

been implemented yet. More weights to

compensate for different renderers, more

OpenType features, better hinting, to

name a few. I plan on continuing to use it

as a tool to explore the new field of web

typeface design, and how we, as typeface

designers, can design better typefaces for

this whole new territory.

Every day that passes, the technology for

setting text on the web gets better, and

soon the capabilities of text on the web

will far surpass those of setting text for

print. I can’t wait for that time to come,

and if it doesn’t come soon enough, hope-

fully Civilian and I can help it along.

<p>

<p>

<p>

<h1> What’s next?

P a g E 9 7 O F 9 8

Jan Willem Stas, Erik van Blokland,

Petr van Blokland, Paul van der Laan,

Peter Biľak, Just van Rossum, Françoise

Berserik, Frank Blokland, Peter Verheul,

Christoph Noordzij, Fred Smeijers,

& Gerard Unger

for opening a whole new world up to me,

and for all their advice and patient wisdom.

Paul Barnes, Christian Schwartz, Donald

Beekman, Liza Enebeis, Luc(as) de Groot,

Miguel Sousa, & Kris Sowersby

for their invaluable critiques of my project

and exciting lectures.

Tal Leming, Erik van Blokland, Just van

Rossum, Yanone & Frederik Berlaen

for their respective programs, especially

Yanone for his help with the Civilizer.

Alp, Emma, Florian, Yanone, Kunihiko,

Lauri, Linda, Malte, Marina, Sun, & Yassin

for the support and good times they

provided on and off the foosball field.

Katie & my mother

for everything else.

<my teachers>

<lecturers>

<programmers>

<classmates>

<family>

<h1 style=”100em”> THANK YOU!

PRINTED IN DEN HAAG, NL FOR THE TYPE AND MEDIA FINAL EXAM, JUNE

3�TH, �� AT THE KONINKLIJKE ACADEMIE VAN BEELDENDE KUNSTEN,

DEN HAAG �KABK� . ALL WORK CONTAINED WITHIN IS COPYRIGHTED ©��

COLIN M. FORD, ALL RIGHTS RESERVED, EXCEPTING THE WORKS CITED,

WHICH ARE THE COPYRIGHTED WORKS OF THEIR RESPECTIVE AUTHORS.

Colin M. Ford

[email protected]

www.colinmford.com

Civilian Process Book and Specimen

Documents

Transcript of Civilian Process Book and Specimen