Civilian Process Book and Specimen by Colin Ford

<!DOCTYPE HTML> <html> <head>

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

</head> <body>

Research

Process

Specimen

The End

<h1>

<p>

What is Civilian?

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 individual behind todayâ&#x20AC;&#x2122;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.

<p> 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 handful 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 a g e 1 of 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â&#x20AC;&#x2122;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 technology 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.

<p>

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 conclusions about what a good typeface for the web is and what it should do.

P a g e 2 of 9 8

<p>

Civilian is my exercise in experimentation, and though it is not perfect quite yet, I have learned a lot about the field of web typeface design in the process.

<p>

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 a g e 3 of 9 8

<img>

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 6 of 9 8

<h1>

On Font Metrics and Web Fonts

<p> 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 letter at some sizes. Paul van der Laan suggested that it might be because of rounding errors in my metrics; I was dividing my UPM of 1000 by 18 pixels, which, objectively, 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). <p> As shown in the March 28th draft, however, 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 a g e 7 of 9 8

<p>

Still, the issue of rounding errors kept bugging me. Miguel Sousa gave a threeday workshop for the three days after my talk with Paul, filling my head with even more numbers and font math. My questions 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 instance? I needed to experiment.

<p> …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 a g e 8 of 9 8

When displaying a font designed for 18px, if the actual height doesn’t divide evenly, a chaotic pixel pattern results.

P a g e 9 of 9 8

<p> 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, causing 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] <p> 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 hinting was invented.

<p>

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 a g e 1 0 of 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â&#x20AC;&#x2122;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 drawbacks 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. <p> 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 a g e 1 1 of 9 8

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â&#x20AC;&#x2122;t as apparent as in print.

<p>

That said, my typeface was built on the good old standard, 1000 UPM, and when converting it to TrueType to hint it I converted it to 2048.

P a g e 1 2 of 9 8

<cite> [1]

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>.

<cite> [2]

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>.

<aside> [3]

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 3 of 9 8

<h1>

Research into the use of Typefaces on the Web

<p> As I started to choose what family I wanted to represent through my thesis, I began to keep up a spreadsheet that would catalog how blogs across genres and nationalities 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 respectively 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 navigation and captions. Rarely did web sites use more than one typeface, which was a shock to me.

<p>

The italic of the second font was only used once in my sample selection, and thus isnâ&#x20AC;&#x2122;t included in the chart.

P a g e 1 4 of 9 8

Verdana Verdana Arial Georgia Helvetica Neue Lucida Grande Georgia Verdana Lucida Grande

shitmykidsruined.com

deadline.com/hollywood

everything-everywhere.com

thesartorialist.blogspot.com

boingboing.net

dailykitten.com

shorpy.com

apartmenttherapy.com

http://pitchfork.com

Shit My Kids Ruined

Deadline Hollywood

Everything Everywhere

The Sartorialist

Boing Boing

The Daily Kitten

Shorpy

Apartment Therapy

Pitchfork

Myriad Pro

kottke.org

Kottke Georgia

Helvetica

hipsterrunoff.com

Hipster Runoff Lucida Grande

Lucida Grande

hilobrow.com

HiLobrow

theoatmeal.com

Trebuchet

thinkprogress.org

Climate Progress

theawl.com

Trebuchet

postsecret.com

Post Secret

The Oatmeal

Hoefler Text

zenhabits.net

Zen Habits

The Awl

Main Font

Blog address

Blog name

P a g e 1 5 of 9 8

Headline, text

Text, Navigation

Headline, Text, Navigation

Text

Headline, Text, Navigation

Text, Navigation

Headline, text, Navigation

Headline, text

Text

Used as

<table>

-Headlines, Sidebar Links Headline -Headlines, Navigation Text emphasis, Headlines Links Text emphasis Headlines, subheads, artist names

Yes

Deadline Hollywood

Everything Everywhere

The Sartorialist

Boing Boing

The Daily Kitten

Shorpy

Apartment Therapy

Pitchfork

1 Sponsored link/advertisement

Yes

Kottke

Headline, subhead, sidebar links

Yes

Hipster Runoff

Shit My Kids Ruined

Headline

Yes

HiLobrow

The Oatmeal

Headline

Yes

Climate Progress

Navigation

Headline

Yes

Post Secret

Yes

Zen Habits

The Awl

Used as

Bold?

Blog name

P a g e 1 6 of 9 8

Slant

Yes

Slant

Yes

Titles and Names

Text Emphasis, titles

Titles and Article Names

one single link

Blockquote, image captions

Titles and Article Names

Dates

Blockquote

Used as <table>

-Entry dates Headlines, Navigation -Subheads, Metadata ---Headlines, Navigation Navigation

Georgia

Arial, Georgia, Times

Trebuchet

Lucida Grande, Georgia

Georgia

Deadline Hollywood

Everything Everywhere

The Sartorialist

Boing Boing

The Daily Kitten

Shorpy

Apartment Therapy

Pitchfork

Kottke

Hipster Runoff

Shit My Kids Ruined

HiLobrow

The Oatmeal

Climate Progress

Headlines

Post Secret

Georgia

Headline, navigation

Helvetica

Zen Habits

The Awl

Used as

Other fonts

Blog name

P a g e 1 7 of 9 8

Yes

Bold?

Headlines, Navigation

Headlines

Navigation

Used as <table>

<h1>

The Growth of Screen Resolution over Time

<p> 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. <p> First of all, I would like to point out that saying this is akin to saying that the resolution of your printer doesn’t matter, and we all know that isn’t true. Second, I have been working in relatively the same resolution since I was a child, so I had a hunch that resolution wasn’t improving as quick as some people may think. <p> 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 a g e 1 8 of 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 resolution 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

P a g e 1 9 of 9 8

AVG <canvas>

2011

2008

2005

2002

1999

1996

1993

PPI

62.5

1987 89.93

128.65

1990

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 everything on television just perfectly. “Even if you go to high resolution, there are going to be people in low resolution for a long time.”

<p>

This is very similar in Matthew Carter’s Typo Berlin talk from 4 years earlier:

“When Microsoft first suggested I work on some screen fonts, I said no, no, no, this is philosophically a terrible mistake. 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 a g e 2 1 of 9 8

<p>

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 according to Steve Jobs’ secret plan for the next 20 years, still not everyone will be walking around with that many pixels in their pocket.

<p> When making a web site for a broad audience, the rule among programmers has always 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.

<p>

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 a g e 2 2 of 9 8

Apple products has been well-kept thanks to their fanatical fanbase (thanks specifically 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 resolution 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 3 of 9 8

<h1>

Start of the Design Process

<p> 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.

<p>

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 a g e 2 6 of 9 8

thesis.colinmford.com served as my online notebook for thoughts, quotes from my teachers, drafts, and research.

PagE 27 OF 98

<img>

Top: First digital sketches, February Right: Interpolation sketches, March

P a g e 2 8 of 9 8

P a g e 2 9 of 9 8

<h1>

Sketching with Pixels

<p> 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. <p> For my first sketches I was guessing what character shapes might allow the best pixel placement. For the interpolation sketches, 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. <p> I was lost until I came across this interview with Matthew Carter about how he began his Microsoft typefaces:

“In the past I’ve been burned starting from outlines and trying to be extra clever in the hinting. So I finally deciding, ‘I’m better off grasping the nettle.

P a g e 3 1 of 9 8

P a g e 3 2 of 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 bitmap 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 critical sizes and weights.

<p>

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 underlying model. Just in this case, the underlying model wasn’t made from ink, it was made with pixels.

<p>

This way of sketching continued to be helpful far into the development of the

P a g e 3 3 of 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 FontLab and interpret the outlines. <p> 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.willharris.com.” Will-Harris Studio. 7 Nov. 1997. Web. 26 June 2011. <http://www. will-harris.com/verdana-georgia.htm>.

P a g e 3 4 of 9 8

P a g e 3 5 of 9 8

<h3>

Quantizing

<p> 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 vertical 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.

<h3>

<p>

Coding Easily the most handy thing that I learned in the first semester is how to write Python and use RoboFab to my advantage. Learned that if a task is repeatable, 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 command line so that I could quickly proof my designs in the browser.

<p> For those proofs, I used JavaScript to generate a desired text in multiple sizes, or to generate a quick side-by-side character comparison.

@font-face {

f o n t - f a m ily : ' Civ ilia n ' ;

s r c : u r l( ' C iv ilia n . w o f f ' ) ;

f o n t - w e ig h t : 4 0 0 ;

f o n t - s t y le : n o r m a l;

} @font-face {

f o n t - f a m ily : " Civ ilia n " ;

s r c : u r l( " C iv ilia n - B o ld . w o f f " ) ;

f o n t - w e ig h t : 7 0 0 ;

f o n t - s t y le : n o r m a l;

} @font-face {

f o n t - f a m ily : " Civ ilia n " ;

s r c : u r l( " C iv ilia n - I t a lic . w o f f " ) ;

f o n t - w e ig h t : 4 0 0 ;

f o n t - s t y le : it a lic ;

} @font-face{

f o n t - f a m ily : " Civ ilia n S a n s " ;

s r c : u r l( " C iv ilia n - S a n s . w o f f " ) ;

f o n t - w e ig h t : 4 0 0 ;

f o n t - s t y le : n o r m a l;

} @font-face{

f o n t - f a m ily : " Civ ilia n S a n s " ;

s r c : u r l( " C iv ilia n - S a n s - B o l d . w o f f " ) ;

f o n t - w e ig h t : 7 0 0 ;

f o n t - s t y le : n o r m a l;

}

P a g e 4 0 of 9 8

<h1>

<p>

Civilian Family Planning Civilian was built to be implemented through CSS. It’s not that different from planning a normal family, but some specific 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. However, 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.

<p>

Civilian also has OpenType features that can be accessed in Firefox 4+. By activating font-feature-settings: “lnum” on; a user can access the lining numbers and punctuation 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 a g e 4 1 of 9 8

@font-face

<div>

<p>

Civilian Serif

Regular 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.

<p> I also wanted a typeface that referenced the human being behind the content on every â&#x20AC;&#x153;social mediaâ&#x20AC;? 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 a g e 4 2 of 9 8

P a g e 4 3 of 9 8

@font-face

Civilian Serif

ascender and cap height the same

low contrast

PagE 44 OF 98

very high x-height

calligraphic features

PagE 45 OF 98

@font-face

Civilian Serif

P a g e 4 6 of 9 8

<may 2>

<may 9>

P a g e 4 7 of 9 8

@font-face

Civilian Serif

<h3>

Short-Ranging Figures

<p>

The Civilian family comes with shortranging and lining figures both complete with matching punctuation. The default, short-ranging, are like so-called “OldStyle” figures in that they mimic the rhythm of the lowercase, but they don’t descend 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 a g e 4 8 of 9 8

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.

PagE 49 OF 98

@font-face

<p>

Civilian Serif

Bold 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%â&#x20AC;&#x201C;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 a g e 5 0 of 9 8

P a g e 5 1 of 9 8

@font-face

<em>

<p>

Civilian Serif

Italic The aim of the italic was to make it as nononsense 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 sufficient contrast in text from the roman.

P a g e 5 2 of 9 8

P a g e 5 3 of 9 8

@font-face

Civilian Serif

<may 4>

The italic started off being more cursive, but slowly worked its way back to a more conventional construction.

P a g e 5 4 of 9 8

<img>

<description> 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. P a g e 5 5 of 9 8

@font-face

<span>

<p>

Civilian Serif

Symbols Unlike an image, an icon typeface is scalable, allowing multiple uses at multiple sized with only one download. This would allow for interfaces that involve things enlarging, or the user zooming in, without 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 transparent backgrounds like GIFs or PNGs always need to have a background color to provide anti-aliasing, resulting often in images that have a transparent background 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 a g e 5 6 of 9 8

P a g e 5 7 of 9 8

@font-face

<h1>

<p>

Civilian Sans

Sans Regular 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 â&#x20AC;&#x153;carpenter-constructedâ&#x20AC;? 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 a g e 5 8 of 9 8

P a g e 5 9 of 9 8

@font-face

Civilian Sans

g j

k y

M R

Q & ÂŁ

P a g e 6 0 of 9 8

I J

g j k y

K M R Q & ÂŁ

P a g e 6 1 of 9 8

@font-face

<h1>

<p>

Civilian Sans

Sans Bold 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â&#x20AC;&#x2122;s bold, there is a contrast increase in the stroke to manage the heaviness of the stems.

P a g e 6 2 of 9 8

P a g e 6 3 of 9 8

<h3>

Hinting

<p> Finally, in the end, I opted for TrueType hinting. Through my research I discovered that PS hints had no effect on the appearance 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 â&#x20AC;&#x153;snow caps,â&#x20AC;? or grayish pixels on the top of the letters, from collecting. <p> 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 a g e 6 5 of 9 8

<h1>

<p>

Comments on Civilain’s Design The screen is an interesting medium to design for. It is difficult to manage weight on screen because of the limited resolution 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 urgings, 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.

<p> It was important to me that Civilian not look like it was simply made from the pixels that I sketched. I wanted a personality 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 prevalence 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 a g e 6 6 of 9 8

<p> I learned that typefaces with stem widths at just around 1 pixel when at their intended PPM are hard to control. Often the stems would land in the middle of two pixels, creating a blurry stem. When I redid 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â&#x20AC;&#x2122;s-eye, so to speak. <p> 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â&#x20AC;&#x2122;s bold was more like designing a regular and a black than a regular and a bold.

<img>

PagE 67 OF 98

15°

<p> 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 contrast. I also had tried a fairly cursive construction 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 subdued, with the joins being very high or low on the letter, without a lot of funny stuff. So, I endeavored to make a no-nonsense italic. <p> 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 PagE 68 OF 98

more that I considered it, the more I conceded 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. <p> Finally, I initially intended to add more icons than I have added so far to Civilian. 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.

<p>

Civilian might not have all the cool typeface 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 a g e 6 9 of 9 8

<h1>

A Word about this Specimen...

<p> You’ve been reading Civilian all throughout this book, but you haven’t been reading it how it was originally intended. Civilian is a web typeface and mainly only intended to be viewed on the screen, specifically 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. <p> 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 anything until you fire it up in your browser.

<p>

So, when you’re able to, head on over to colinmford.com to see the real thing.

P a g e 7 2 of 9 8

Serif Regular <lowercase>

abcdefghijklmnopqrstuvwxyz àáâãäåāăąæǽçćĉčċďðđèéêěëēĕ ėęĝğġģĥħıìíîïĩīĭįĳĵ�ķĺļľŀłñńņň òóôõöōŏőœøǿþŕŗřśŝšşșßţťùúûü ũūŭůűųẁẃŵẅỳýÿŷźżž

<uppercase> A B C D E F G H I J K L M N O P Q R S T U V WXYZÀÁÂÃÄÅĀĂĄÆǼÇĆĈČĊĎ ÐĐÈÉÊĚËĒĔĖĘĜĞĠĢĤĦIÌÍÎÏĨĪĬĮ ĲĴ�ĶĹĻĽĿŁÑŃŅŇÒÓÔÕÖŌŎŐŒ ØǾÞŔŖŘŚŜŠŞȘẞŢŤÙÚÛÜŨŪŬŮ ŰŲẀẂŴẄỲÝŸŶŹŻŽ

<misc>

0123456789�� $�¢�€�£�¥�§�¶�¤##%%‰‰°° []��()��{}��÷�×�–�+�±�=�≠�≈�>><� ¡!¿?&@*†‡~-–—.,:;‘’�‚"“”„“›‹»« •…/\|`´ˇ�ˆ˘˝¨˙˜¯˚¸˛·ªº��ⁱ��ⁿ�� ®©�™℠

P a g e 7 4 of 9 8

Serif Bold <lowercase>

abcdefghijklmnopqrstuvwxyz àáâãäåāăąæǽçćĉčċďđèéêěëēĕ ėęĝğġģĥħıìíîïĩīĭįĳĵ�ķĺļľŀłñńņ ňòóôõöōŏőœøǿþŕŗřśŝšşșßţťùú ûüũūŭůűųẁẃŵẅỳýÿŷźżž

ABCDEFGHIJKLMNOPQRSTUV WXYZÀÁÂÃÄÅĀĂĄÆǼÇĆĈČĊ ĎÐĐÈÉÊĚËĒĔĖĘĜĞĠĢĤĦIÌÍÎÏĨ ĪĬĮĲĴ�ĶĹĻĽĿŁÑŃŅŇÒÓÔÕÖŌ ŎŐŒØǾÞŔŖŘŚŜŠŞȘẞŢŤÙÚÛÜ ŨŪŬŮŰŲẀẂŴẄỲÝŸŶŹŻŽ

<misc>

0123456789�� $�¢�€�£�¥�§�¶�¤##%‰° []��()��{}��÷×–+±=≠�≈>< ¡!¿?&@*†‡~-–—.,:;‘’�‚"“”„“›‹»« • … / \ | ` ´ ˇ � ˆ ˘ ˝ ¨ ˙ ˜ ¯ ˚ ¸  ˛ · ª º ® © � ™℠

P a g e 7 5 of 9 8

PagE 76 OF 98

PagE 77 OF 98

Serif Italic <lowercase>

abcdefghijklmnopqrstuvwxyz àáâãäåāăąæǽçćĉčċďðđèéêěëēĕ ėęĝğġģĥħıìíîïĩīĭįĳĵ�ķĺļľŀłñńņňò óôõöōŏőœøǿþŕŗřśŝšşșßţťùúûüũ ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ÿ ŷ ź ż ž ff ffi fi

<uppercase> A B C D E F G H I J K L M N O P Q R S T U V WXYZÀÁÂÃÄÅĀĂĄÆǼÇĆĈČĊĎ ÐĐÈÉÊĚËĒĔĖĘĜĞĠĢĤĦIÌÍÎÏĨĪ ĬĮĲĴ�ĶĹĻĽĿŁÑŃŅŇÒÓÔÕÖŌŎŐ ŒØǾÞŔŖŘŚŜŠŞȘẞŢŤÙÚÛÜŨŪŬ ŮŰŲẀẂŴẄỲÝŸŶŹŻŽ <figures> 0 1 2 3 4 5 6 7 8 9 � � � � � � � � � � <misc> $ � ¢ � € � £ � ¥ � § � ¶ � ¤ # # % ‰ ° []��()��{}��÷×–+±=≠�≈>< ¡!¿?&@*†‡~-–—.,:;‘’�‚"“”„“›‹»« • … / \ | ` ´ ˇ � ˆ ˘ ˝ ¨ ˙ ˜ ¯ ˚ ¸  ˛ · ª º ® © � ™℠

P a g e 7 8 of 9 8

Sans Regular & Bold <lowercase>

abcdefghijklmnopqrstuvwxyz

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

<misc>

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

$�¢�€�£�¥�§�¶�¤##%‰° []��()��{}��÷×–+±=≠�≈>< ¡!¿?&@*†‡~-–—.,:;‘’�‚"“”„“ ›‹»«•…/\|

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTU VWXYZ

<misc>

0123456789��

$�¢�€�£�¥�§�¶�¤##%‰° []��()��{}��÷×–+±=≠�≈>< ¡!¿?@*†‡~-–—.,:;‘’�‚"“”„“ ›‹»«•…/\|

P a g e 7 9 of 9 8

<short-ranging figures>

PagE 82 OF 98

fontsinuse.com

Fonts In Use â&#x20AC;&#x201C; IC

PagE 83 OF 98

PagE 84 OF 98

guardian.co.uk