Typography for the Screen. Table of Contents 1 of 1

Home , Counter (typography), FF Meta, Georgia (typeface), Legibility, Overshoot (typography), Typeface anatomy

ScreenType Typography for the screen. Table of Contents 1 of 1

E. Anatomy of a Screen Font Table of Contents Anatomy Index (Serif) Anatomy Index (Sans-serif) Everything you need to know about screen fonts. x-height Ascenders & Descenders A. Legend Distinguishability How to use this book Exaggerated Features B. Introduction Curves Before we get started Spacing Counters & Apertures C. The Screen Contrast A History of Screen Fonts Screen Technology F. Using Type on Screen Writing With Light Sans vs. Serif Screens Today Selecting a Typeface for Screen Conclusion Testing Screen Performance Pairing Screen Fonts D. Verdana & Georgia Font Size & Line Length Verdana - A Role Model Sans-Serif Contrast and Color Georgia - A Role Model Serif G. Appendix General Typeface Anatomy Final Thoughts Bibliography H. Glossary Need to start over? Tap to return to cover. 

Legend 1 of 1

Legend

How to use this book.

Navigation Interaction

 Table of Contents Swipe to change state

 Appendix & Glossary Tap to play

 Return to Anatomy Index Pinch & Zoom

 Go to next page Scroll frame

 Go to next section Double tap to zoom

Interactive Elements

Swipe over screens to turn them on.

Tap on buttons to toggel states.

All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law. With every font now available online,

ImagineImagine aa world where one in everyeight peopleeight had understanding how typography translates thepeople same had voice. the sameBefore voice. HTML5 Before and HTML5 CSS3 as and we to the screen is becoming an increasingly knowCSS3 asit, weeight know typefaces it, eight were typefaces used again were andused againagain onand every again website, on every that’s website, eight that’s voices eight to valuable skill-set. expressvoices to countless express countless unique individuals. unique individuals. Introduction 2 of 2

Introduction

Before we get started.

At heart this book is an overview of screen typography from superc a typographers point of view. In other words, this will not be another “how to use type online” books. We won’t discuss the well known principles of web design like using short headings, how to code, or why you should use rems. Rather alifrag this book will talk about the letters and fonts themselves.

As you will come to learn in the following pages, on-screen typography has exploded over the past year. Resources ilistic however are difficult to find and there are few if any up-to- date standards. We will dive head first into the medium, the screen. By understanding its limitations, we can illustrate the problems screen fonts solve and why many print fonts expiali don’t perform well on-screen. We will examine fonts that do perform well and in doing so illustrate how to select and identify them in the sea of fonts we all drowned in this year. docious BUCKLE UP!

The Screen 1 of 8

History of Screen Fonts

From to @font-face.

When HTML was released in 1990, fonts were controlled by the browser. There was no way to control web type until Netscape (remember that one?) introduced the tag in 1995 that quickly became standardized into HTML2.

With it, designers could specify a font, but there was a catch, that font had to be on the user’s computer system, if the user didn’t have that font installed, the design would fall-back to the browser’s default and often monospace font. This limitation carried over to Cascading Style Sheets (CSS), in 1996.

In 1998, CSS2 further simplified types process by separating content from style, but still relied on installed system fonts. A list of “web-safe” fonts, fonts likely to be present on most computer systems, was defined and CSS2 gave designers the ability to define a font stack, a string of defined fallback fonts. This allowed designers to define a font style, serif, sans-serif, monospace, or cursive and stack the closest matches to their intended font choice. The Screen 2 of 8

With the web growing overnight and designers choosing their own fonts, Microsoft started the Core Fonts for the Web Initiative. They released a series of freely distributable screen friendly fonts. In that list was Georgia and Verdana, which both became staple screen fonts and models for every web font to follow.

Hidden inside CSS2 was a hint at the future. Web designers have a complicated relationship with Internet Explorer (IE), for many it is a thorn in our designs side. To ease that pain, we have IE to thank for modern web typography. In 1997 IE 4.0 added support for downloading remote fonts. This Verdana ability was introduced into CSS2 as the font-face rule.

However, type foundries sided against the font-face rule. The delivery method made their fonts available to be downloaded and used by anyone. Font-face in CSS2 was used for grayscale anti-aliasing. It worked well for system fonts that were optimized for screen, like Georgia and Verdana, but other screen fonts did not exist at the time and print fonts made the web look even worse. IE’s font- face rule was short lived and ahead of its time and by the time CSS2.1 was released in 1999, font downloading was abandoned. Font-face would not see again for twelve years when CSS3 was released in 2011 as the @font-face rule. The Screen 3 of 8

Screen Technology

The medium.

Our understanding of how typography works in print does not translate directly to digital space. The ‘web page’ rode in on the metaphor of the printed page, and our tendency is to think of it that way. The truth is, there are very significant differences that directly affect type on screen. The foremost is that print is physical while the web is a digital medium; the difference is tangible.

In print we carefully and accurately set static content whereas on screen, that content is dynamic, it is always changing. On top of that, content is presented at variable resolutions on screen. Print can have up to 2400 dots per inch (DPI) on a laser printer making it as clear as can be. The screen's 72 pixels per inch (PPI) makes it clear your not going to get the same clarity on screen. This PPI gap has lead typographic standards on the web from day one. However, with 72 PPI monitors, 132 PPI iPads, and 326 PPI retina displays, PPI is allowing for more and more typographic details and continues to blur the line between the printed page and web page. The Screen 4 of 8

The screen is an adaptive medium; it is not a letter sized piece of paper but every paper size there is. On screen, we design for the range of what can happen; the design we see in front of us is only a version, one that needs to adapt to countless resolutions, sizes, and devices.

In contrast to paper, the screen is a dark surface where forms are written with light. Paper is viewable by the reflection of light whereas the screen projects images through the emission of light. This back-lite surface calls for a new way of thinking and changes in deep-rooted typographic standards. The Screen 5 of 8

Writing With Light

Rendering text on screen.

A big difference between type displayed on screen versus Glyph Outline Rendered Glyph paper is the way the text is rendered. Glyph outlines get converted into pixels, the medium. That conversion process varies across operating systems, devices, and various PPI screens and often results in a lack of consistency. This conversion happens through rendering engines. Each operating system and browser controls which rendering engines are used. Therefore, even two browsers on the same system can produce different results.

Aliasing displays diagonals and curves as horizontal zigzags and vertical lines on screen. Anti-Aliasing is the method systems use to reduce aliasing by shading the edges of glyphs. This is known as grayscale rendering. The edge pixels of each glyph are not black but shades of gray, this makes the contours appear smoother, and lets a typeface’s details and personality shine through the pixels. This was a big step for type on screen, it was now more than just a legible glyph; a typeface could now have character. The Screen 6 of 8

Screens Today

We have come a long way.

Safari 3.1 re-sparked web fonts and brought the forgotten @font-face rule back into the lime light. It wasn’t because of an influx of screen fonts, but big advancements in the medium, the screen. LCD displays had become the norm; we all stared in awe at high resolution flat-panels that performed anti-aliasing via subpixel rendering.

Most displays today have pixels made up of subpixels. Type is displayed by combining red, green, and blue subpixels. This is known as the additive color system. On paper, colors are perceived by the absorption and reflection of light off the pigments of ink on a surface. This is known as the subtractive color system.

In a subtractive color system like print, the contrast of black on white is very legible. However, in an additive color system, the color white is produced with each red, green, and blue subpixel at full intensity. This is why black on white is harsh on the eyes on screen. The light radiating from pure white can also bleed into the fine details of glyphs. The Screen 7 of 8

Glyph Outline Rendered Glyph The side-by-side red, green, and blue subpixels control the color and brightness of a whole pixel. Because pixels are so tiny, we don’t perceive them as being made up of red, green and blue bars but as a solid color. Subpixel rendering allows each pixel to carry the visual weight of its neighboring pixels. Subpixels produce subtle color shifts along the edges of glyphs that significantly improve the rendering of text, especially at small or text sizes. This is clearly seen if we desaturate a subpixel rendered glyph and compare it to a grayscale render. The horizontal resolution is tripled, resulting is a much crisper detailed character.

Due to the way type is rendered on screen, a lot depends on how letterforms are drawn, the rendering engine being used, and the amount of effort the typeface designer puts into hinting and instructing each glyph to fit within the pixel grid at key point sizes. The Screen 8 of 8

Playfair

A B C D E F G H I J K L M N O P Q sR 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 1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ’ “ ” ( )

With every font at our fingertips, we are excited to ‘set’ Tomorrow type on-screen but are still in the growing pains of new technology. Browsers and operating systems do not yet Surviving the growing pains of screen type. offer consistent rendering and CSS rules such as line- height do not render equally cross-browser. The screen With countless fonts and advanced rendering that allows calls for more advanced fonts packed with information that a typeface to show its personality on screen, web designers eliminates the need for advanced typesetting. Luckily, there are now able to design pages that fit their client’s voice. are already countless open source fonts available that were designed to perform on screen. There are no two fonts better to look up to than Georgia and Verdana. Verdana & Georgia Georgia & Verdana 1 of 3

Verdana

A Role Model Screen Sans Serif.

When thinking of screen fonts, two faces by one designer Verdana comes to mind; Matthew Carter’s traditional serif Georgia and humanistic sans-serif Verdana. Dissecting these fonts and examining their success tells us a lot about what makes Verdana does everything right on screen. a font perform well on screen. 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 Verdana’s tall x-height, open counters, bold bolds, extra 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 spacing, exaggerated features, distinct characters, and 1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ’ “ ” ( ) countless screen optimizations makes it a role model sans- serif for screen. Its main features are a significantly larger x-height, more generous counters, and much wider spacing Verdana is Optimized for small text. then we see in print. This is because Verdana was designed to perform well on low resolution displays. Verdana 12pt Who would pack five dozen old quart jugs in my box? PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! Verdana is a text font, it was also designed to work well at very small point sizes. Therefore, when set large, one may Verdana 10pt think Verdana is ugly. Vedana was designed for function; Who would pack five dozen old quart jugs in my box? PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! its ‘ugliness’ comes from its many subtle adjustments and exaggerated features that help distinguish between Verdana 8pt Helvetica Neue 8pt Who would pack five dozen old quart jugs in my box? Who would pack five dozen old quart jugs in my box? similarities in letterforms. PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! Georgia & Verdana 2 of 3

For example, the lowercase characters are a pixel taller than Verdana is packed with screen optimizations. the uppercase at key point sizes. Notice how the lowercase lc 1px taller ‘i’ is also slightly shorter than the lowercase ‘l’. This aids in then UC the distinguishing of particular characters like ‘1’, ‘I’, ‘l’ (L), ‘i’ distiguishable exaggerated and ‘J’. Verdana’s curves were also reduced to a minimum features in the counters to keep text crisp down to 8 points.

Verdana at first appears extended, but this is the effect of a tall x-height and extra spacing. In an interview with Matthew Carter he said, Spacing Comparison

Times New Roman 16pt “In Verdana, it’s the regularity of the spacing that’s just as Pack my box with five dozen liquor jugs.

important as the positive parts of the letterform. Wider Arial 16pt spacing wasn’t enough, it also had to be more regular, this Pack my box with five dozen liquor jugs. was the thing that gave it an advantage in readability. Georgia 16pt Verdana really isn’t wide, the sensation of width comes Pack my box with five dozen liquor jugs. from the spacing.” Verdana 16pt Pack my box with five dozen liquor jugs.

Times New Roman 8pt This extra spacing ensures that letters never touch. We Verdana’s wider letters and extra spacing makes it appear extended increasing readability at small text sizes. can see the care that was taken when looking at letter Arial 8pt Verdana’s wider letters and extra spacing makes it appear extended increasing readability at small text sizes. such as ‘ ’, ‘ ’, and ‘ ’, as those letters tend combinations fi fl ff Georgia 8pt to blur together creating hard-to-read blobs on-screen. Verdana’s wider letters and extra spacing makes it appear extended increasing readability at small text sizes. Verdana 8pt Verdana’s wider letters and extra spacing makes it appear extended increasing readability at small text sizes. Georgia & Verdana 3 of 3

Georgia A Role Model Screen Serif. Georgia Georgia is a king among screen fonts. Carter took the same strategy behind Verdana and applied it to the complexity of serifed characters. This is so remarkable because serifs typically blur on screen, details like curves don’t fit within Georgia is a king among screen fonts. the pixel grid requiring tedious hinting to perform well. 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 However, Georgia looks sexy on screen. At large sizes, it 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 could be mistaken for Times New Roman. On-screen in 1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ’ “ ” ( ) body-text sizes, it takes on its true purpose and remains clear at 8-12 points. Its x-height is larger than Times, but not as large as Verdana’s, and the result is a face with more Georgia is a screen serif that performs well at small font sizes. traditional proportions that renders exceptionally well. Georgia 12pt

Who would pack five dozen old quart jugs in my box? Georgia and Verdana both have bolds that could be called PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! ultra-bolds; just compare it to Times New Roman’s bold. Georgia 10pt

This ensures that you can always tell the difference between Who would pack five dozen old quart jugs in my box? PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! bold and regular, while their taller x-heights, open counters and extra spacing ensures that characters never fill-in, even Georgia 8pt Times New Roman 8pt

Who would pack five dozen old quart jugs in my box? Who would pack five dozen old quart jugs in my box? at small sizes. Georgia and Verdana are role model screen PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS! fonts that help refine typeface anatomy for screen. Anatomy Anatomy 1 of 10

ScreenType Anatomy

Tap to explore the anatomy of a screen serif.

cap-height ascent midline baseline descent Anatomy 2 of 10 x-height

Use a taller x-height on screen. x-height is the distance between the baseline and mid-line; it is the same height as the lowercase letter ‘x’. An increased x-height has one of the most noticeable effects on legibility and readability on screen. However, the reason we want a taller x-height is not so obvious. The short answer is that a taller x-height helps forms appear bigger at text sizes and therefore increases readability.

Lowercase letters are enclosed within the x-height. On Frutiger LT Std 55 Roman Futura Std Book the right, the letters ‘a’, ‘e’, and ‘s’ were chosen as they each have three horizontal strokes occurring within the x-height; that is a busy space. On screen when pixels are xaes xaes “Geometry can produce legible letters but “Geometry can produce legible letters but in close proximity they blur together decreasing character art alone makes them beautiful. Art begins art alone makes them beautiful. Art begins where geometry ends, and imparts to letters where geometry ends, and imparts to letters distinguishability. A taller x-height like Frutiger’s, forces a character transcending mere measurement.” a character transcending mere measurement.” - Paul Standard. - Paul Standard. the counters and apertures in this tight space open, and therefore we get more legible rasterized letters on screen. Anatomy 3 of 10

Ascenders & Descenders

Use a shorter ascent and descent on screen. ascenders A taller x-height increases the space within glyphs making each character, especially the lowercase, more distinguishable. But where did that space come from? The more you increase the x-height, the shorter the ascenders and descenders become. This is because a fonts metric system is proportional. However, this is not a consequence but another advantage of a taller x-height. descenders

On the bottom right we see a typographic nightmare, a paragraph with a slew of ascenders and descenders. Notice how the taller x-height and shorter ascenders and descenders in Georgia and Verdana creates a more legible Futura (bad) Verdana (good) paragraph then a font with a shorter x-height and taller ascenders and descenders like Caslon and Futura. The Subgraph fight tidy bit kilt plight Subgraph fight tidy bit kilt plight tip filthy flip lift light bid tight shorter ascenders and descenders give the main features tip filthy flip lift light bid tight flighty pit guilt fly jig bedquilt jilt flighty pit guilt fly jig bedquilt jilt of letterforms as much space as possible while ensuring fill gift lillypilly glyph kit bight lid fill gift lillypilly glyph kit bight lid lines of type never touch. Short ascenders and descenders kip blip dip flit pity fig hit pitch big kip blip dip flit pity fig hit pitch hid fit lip ribgrass pig dig till blight big hid fit lip ribgrass pig dig till prevent lines from intersecting when set close together, hip light glide headlight. blight hip light glide headlight. making them very effective for text on screen. Anatomy 4 of 10

Distinguishability

Glyphs should be distinguishable from each other.

One of the single most important legibility features of a text font is character distinguishability. Distinguishability is the characteristic of a letter that makes it easily told apart from R a n g Q every other letter. This is why it is important that a typeface follows a familiar skeleton. The letters ‘R’, ‘a’, ‘n’, ‘g’ and ‘Q’ Familiar Skeleton were chosen for this example on the right because they carry the personality traits and characteristics of a font.

Distinguishability is rooted in a fonts design. The one-story ‘a’ in Futura is distinguishable, it follows a familiar skeleton Frutiger LT Std 55 Roman Futura Std Book that is distinct in headlines. But when viewing conditions are low and we have less pixels to fill, distinguishability Intraocular Intraocular becomes more and more difficult; thata ‘ ’ could become a ‘o’ Intraocular Intraocular or a ‘c’ at smaller font sizes. We will almost always make the Intraocular Intraocular Intraocular Intraocular decision that it is an ‘a’, we read words, but the time it took Intraocular Intraocular Intraocular Intraocular to come to that decision hindered reading speed. Anatomy 5 of 10

Exaggerated Features

Exaggerate the differences.

To make a font distinguishable at small screen and font sizes, you will often need to exaggerate features to help distinguish commonly confused letterforms like the number ‘1’, lowercase ‘l’ (L) and uppercase ‘I’. This is why many screen fonts feel awkward at large sizes, what you are noticing are its exaggerated letterforms. Typefaces like Georgia and Verdana that were designed specifically for legibility on screen; have exaggerated metric systems and letterforms. These features offer excellent legibility on screen but often look massive when printed on paper.

Letters like ‘hn’ or ‘1liI’, can often only be differentiated by their contrasting ascent heights. A font with a taller x-height leaves little room for ascent and decent features. The best solution is to exaggerate the differences rather then the similarities in these letterforms. In Verdana, the ‘1’ was given a base and a hook to distinguish it from the lowercase ‘l’ (L) and uppercase ‘I’. The lowercase ‘j’ and uppercase ‘I’ were given bars. The lowercase ‘i’ and ‘j’ are a pixel taller than the cap-height. Anatomy 6 of 10

Curves

Use straighter curves.

The fewer details a letterform needs to convey its character, the more legible it will be on screen.

A glyphs Bézier curves get moved around the pixel grid at each font size. As we already learned, anti-aliasing smooths these curves. But, the smaller the font size the more compacted curves become. On screen, detailed curves can end up blurry from too much anti-aliasing. For this reason, curves should be reduced to a minimum in the counters. Straight lines and clear forms work better then subtle angles or curves. It is this reason a sans serif is often recommended for text on screen.

Georgia The Good Palatino The Bad Optima The Ugly Anatomy 7 of 10

See how letter spacing and word Spacing affects readability. Spacing

Use wider more regular spacing.

Just like shorter ascenders and descenders, wider letter and word spacing prevents letters and lines of text from intersecting. It is very important that lines of text and pairs of letters, their pixels, never ‘touch’ on screen as they are quick to blur together or fill in. This is especially true when rasterized at small text sizes. For this reason, screen fonts typically have wider spacing then print fonts.

This wider spacing is also a product of the exaggerated Do Not Touch! Tight spacing causes letters to blur together. metrics system; a glyphs left and right sidebearings should Gotham Condensed 14pt Gotham 14pt be proportional to the counters and form of each character. “Give me a laundry list “Give me a laundry list More generous counters and a taller x-height lead to wider and I`ll set it to music.” and I`ll set it to music.” sidebearings. However, wider sidebearings are not enough —Gioacchino Rossini —Gioacchino Rossini when we start talking about letter combinations. Fonts like Verdana seem wide because they are intended for small Bodoni 14pt Georgia 14pt text on screen. The smaller the point size, the more space “It is a rarer gift to lay words out “It is a rarer gift to lay words out properly than to write them” is needed between letters to keep them distinguishable. properly than to write them” — Nicholas Barker — Nicholas Barker Anatomy 8 of 10

Counters and Apertures

Use generous open counters and apertures. FF Meta Pro

A typeface with a small x-height can be difficult to read, it results in small counters and apertures in lowercase letters. Counters are the openings that allows white-space to move in and out of the counterforms of a glyph. Generous counters help forms remain open and aid readability when rasterized. Apertures are the openings at the end of an open counter. Large apertures result in larger counterforms and therefore more readable text on screen. aces Frutiger LT Std 55 Roman Helvetica LT Std If you look at the ‘a’, ‘c’, ‘e’, and ‘s’ in FF Meta Pro, you can easily see how the letterforms feel open. Comparing fonts with similar sized counterforms, like Frutiger and Helvetica, xasce xasce shows the effects negative space has on screen. Helvetica’s “Geometry can produce legible letters but “Geometry can produce legible letters but apertures are more closed off than Frutiger’s. Because of art alone makes them beautiful. Art begins art alone makes them beautiful. Art begins where geometry ends, and imparts to letters where geometry ends, and imparts to letters this, white space inside and between Helvetica’s letters (its a character transcending mere measurement.” a character transcending mere measurement.” - Paul Standard. - Paul Standard. counterform) is more closed off. In consequence, the letters fill in on screen. This is very clear when magnified 3200x, notice how Helvetica’s ‘e’ has a one pixel aperture while Frutiger has two pixels to work with. Anatomy 9 of 10

Contrast

Use lower contrasting strokes. Bodoni 14pt High Contrast Droid Serif 14pt Low Contrast “Bodoni would be an admirable “Bodoni would be an admirable A less pronounced weight contrast is an important trait letter for a death notice!” letter for a death notice!” on screen. The thin strokes in a font like Bodoni are more — G. W. Ovink — G. W. Ovink difficult to distinguish then the thicker thins in Droid Serif on a back-lit background. Monolinear typefaces may seem idea but stroke contrast is needed for legibility at small text sizes. There is no clear answer on exactly how much contrast is idea. However, both no contrast and too much contrast can hinder legibility on screen.

To convert Minion Pro into a web font the x-height was slightly raised forcing the counters open and the thins and serifs were made thicker proportionately. Thicker thins help Minion Pro 14pt Minion Web Pro 14pt ensure that the stroke fills a pixel(s). “You cannot understand typography “You cannot understand typography and typefaces without knowledge and and typefaces without knowledge you can’t keep that knowledge for only and you can’t keep that knowledge yourself. Type design is a cultural act, for only yourself. Type design is a not just a few lines of data in the cultural act, not just a few lines of corner of a hard disk.” data in the corner of a hard disk.”

—Jean-François Porchez (1964) —Jean-François Porchez (1964) Anatomy 10 of 10

ScreenType Anatomy

Tap to explore the anatomy of a screen sans-serif.

cap-height ascent midline baseline descent Using Type on Screen Using Type on Screen 1 of 9

Sans vs. Serif

Does it really matter?

Every study has produced the same inconclusive result; in many ways it is a battle of preference. It depends on what an individual is more accustomed to reading and what fits the content and context. If you were to ask history, the serif wins the battle. This is because serifs aid the flow of reading across lines of text, increasing reading speed and aiding eye fatigue. This is great for long texts but the way we read and write content is different on screen; it is rare to come across long texts.

The screen, well screen users, favor a sans serif. This is because we are accustomed to reading a sans serif on screen. Technological limits resulted in blurry serifs for decades. Therefore, it is difficult to say with any certainty Will these two ever stop this silly battle? one is more readable then the other or if we just prefer what we are used to. However, there is still to this day solid logic behind our sans-serif favoritism. The screen renders simple forms and straight lines clearer and thus a sans serif fits more snuggly within the pixel grid. Using Type on Screen 2 of 9

A serif that works as well on screen as it does in print is like finding Waldo. In print, serifs are small, but on screen a serif has to fill at the very least two pixels. In addition to this, they have to be proportional to an exaggerated metrics system. This leads screen fonts to have larger serifs that can hinder the legibility or recognition of individual letters. ACEMinion Web Pro ACEMinion Pro (print)

It is true serif fonts don’t perform well on screen, but that doesn’t mean they can’t. What makes Georgia so successful is its hinting. Hinting is the expensive and time consuming process of instructing a fonts individual pixels at certain pixel sizes. A well hinted design can be clearly readable on screen, but that same design can be unreadable if displayed unhinted.

Readability is in many ways another word for transparency. A typeface should never get in the way of the content it is communicating, it should be invisible. Readability is a measure of function, it depends on how a typeface is used and getting a viewer to read the content. Each and every typeface was designed for a context, some are display faces while some are for text or perhaps a face was designed for small print or cheap paper. The point is you need to select the right typeface for the job, one that fits your medium, intent, content, and audience. Using Type on Screen 3 of 9

Selecting a Screen Font

Not every font is a screen font.

It seems like every font is now available as a webfont. But, just because you can use your favorite font ever on the web, should you? The reality is, it takes a rock star web font to justify using a web font at all. A web font needs to stand up to the tried and true fonts like Georgia or Verdana to be worthwhile in text.

So far this book has looked at typeface design for screen, which is different from the text treatment a graphic designer performs on a web page. However, the same principles, proportions, and metrics that drive a screen fonts construction, helps designers of all kinds select the right face for the job. Though, no matter the font, how well it performs depends on the designers decision to use and execute a typeface in a particular context. Using Type on Screen 4 of 9

When choosing a typeface for screen, look for the features discussed in the Anatomy section of this book: ample space between letters, words, and lines, lower stroke contrast, a taller x-height, and open counters. However, factors like the line length, leading, or the contrast between the foreground cap-height ascent midline baseline descent and background allow a well designed screen font to perform the task it was designed for.

A tall x-height does not always result in good screen Frutiger LT Std 55 Roman Helvetica LT Std performance. Here are two well known fonts, Helvetica and Frutiger, you have most likely worked with them before. x-aces Both have similar sized counterforms and metrics. However x-aces “Geometry can produce legible letters but “Geometry can produce legible letters but only one of these fonts performs well on screen. The larger art alone makes them beautiful. Art begins art alone makes them beautiful. Art begins where geometry ends, and imparts to letters where geometry ends, and imparts to letters apertures and looser spacing in Frutiger makes it a better a character transcending mere measurement.” a character transcending mere measurement.” - Paul Standard. - Paul Standard. screen choice. Helvetica’s letters are more closed off and in consequence those letters fill in.

Just because a font has the right characteristics doesn’t guarantee it will perform well on screen. There are however methods to test a fonts screen performance before you buy it. Using Type on Screen 5 of 9

Testing for Screen

It is all about performance. Roboto 16pt 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 1. One of the single most important legibility features of 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 text font is character distinguishability, make sure each 1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ’ “ ” ( ) character is easily distinguishable at your intended font size.

hamburgevons hamburgevons 2. Make sure the family in question has high contrasting Roboto Regular weights and that the bolds are not so bold they fill in.

3. Check that the counters don't close up, particularly look ages ages at the problematic letters, a, g, e, and s in regular and bold.

4. Make sure the ascenders and descenders have enough fg space, particularly look at the f and g. gf

5. Look at the rounds, b, d, p, q, and o, to see if they are hnmu open enough and have the same optical size and color as the square forms, h, n, m, and u.

6. Remember the golden rule, differentiation. To test, look Iil1 at the I, i, l (L), and the numeral 1. If you still are in question, look at the 3 and 8 or the 5 and 6. Using Type on Screen 6 of 9 Pairing Screen Fonts xx xxxx xx Finding the right match. x x

Pairing fonts for screen use is not very different then how we pair fonts in print. As we have learned, a tall x-height is Pick Me! Pick Me! Open Sans Droid Serif the main identifying feature of a screen font, what we want is to match that height as closely as possible between the text and heading fonts. With so many fonts, it is hard to find the right pair.

If we wanted to pair a serif with Open Sans, we would compare our contenders with the x-height of Open Sans, in this example we would pick Georgia, exactly like this book is set. So the way to pair screen fonts is by comparing their vertical proportions or x-heights, the height of the lowercase letter "x".

Another great way to pair fonts is to use a typeface that has both a Sans and Serif version, like Droid Sans and Droid Serif. This will be the closest match possible as they were built using the exact same metrics and proportions. Using Type on Screen 7 of 9

Font Size & Line Length

It is all relative.

You can use any typeface on screen, as long as it is large enough. At larger sizes, all the rasterization issues we have been talking about disappear. This is one of the reasons this book concentrates on text fonts, the screen's weakness. The smaller the type size is on screen, the more careful one must be about their typeface choice.

On screen users struggle particularly with small text, especially users with visual impairments. Small text causes eye fatigue on screen. On a typical desktop display, a good rule of thumb is to set your text at 50-75 characters per line at a font size of 16px (pixels). On a smartphone that is about 30-40 characters per line.

Coming from print, 16px text seems huge compared to 10-12pts. A 40 year old retina only lets in half the light of a 20 year old retina and by the time one hits 60, only 20% of that light gets in. In a medium dependent on light this becomes a serious accessibility problem and is the most general reason we want bigger type on screen. Using Type on Screen 8 of 9

The other reason we use 16px is the distance we read from on screen. Legibility and reading speed is directly impacted by ones distance from the text. Think of the font size on a billboard or TV for example. The average distance from a desktop screen is 23 inches and 28 inches is the recommended distance for your eye health.

If you take distance, PPI, and the medium into account, 16px on screen is the same as 12pt on paper. Take a printed book and place it 28 inches away from your eyes and try and read it. Screen size, resolution, PPI, and distance all influence the idea font size. A tablet for example is different from a desktop screen, like a book, we hold it in our hands, it is closer. On top of that the PPI is often higher, there are more pixels per square inch. This is why you can get away with 14pt type on a HD or high PPI screen. But, when you take into account the sea of variable devices, resolutions, and pixel densities, 16px is much safer choice. Using Type on Screen 9 of 9

Color & Contrast

Use high contrast but avoid the extremes.

Text is easier to read when there is a sufficient contrast between the text and the background. Web Content Accessibility Guidelines (WCAG) 2.0 level AA compliance requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA compliance requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

However, high contrast such as black on white can cause eye strain on screen. Pure black is harsh. It is nearly impossible to find something physical that is pure black. Roads aren’t black. Coal isn’t black. Ink isn't black. This text isn't black. Is anything really black? On top of that the glaring white background of the screen is exhausting. White paper is not white, it is viewed by the reflection of light and takes on color from the surrounding environment. Therefore an off black text on an off white background (like this page) is idea, it basically simulates printed material. Appendix Appendix 2 of 5

Your basic anatomy

Just tap an orange letterpart to learn more. Appendix 3 of 5

Final Thoughts

The end is just the begining.

At this point we learned all about the medium (screen), Every word in this book aimed to help you through the dissected the rock stars Georgia and Verdana, discussed growing pains of type in the digital age. However, a smart the characteristics and anatomy of a screen typeface, man who taught me almost everything I know about and learned how to select, pair, and set type on screen. typeface design once told me after teaching typography for Although this marks the end of our time together, it is not twenty years that you can't teach typography. All one can so the end of screen type development. Each and every day is hope to instill a passion for type and help you see form technology continues to lift the limits and blur the lines in a new way. A typeface is only as good as its intentions. between the digital and printed page. We are no longer Whether you are designing the next typeface or selecting limited to a handful of fonts but afloat in a sea of them. the right one for your job, I hope the content of this book The only limit left is the one the medium opposes on us. makes your font or design the next rock star. As we break away from the tried and true and push the boundaries of on screen typography, we must remember Sincerely, what and who we are designing for. Not every typeface is Rhett A Forbes a screen face and not every screen face is right for the job. designer

End. Appendix 4 of 5

Bibliography

Give credit where credit is do.

Ahrens, Tim. "A Closer Look At Font Rendering." Smashing Eden, Dan. “Tailor-Made Type for Web Design - Type-cast.” Magazine. Smashing Magazine, 24 Apr. 2012. Web. 13 Nov. Typecast. Typecast, 19 Dec. 2013. Web. 11 Oct. 2014. 2014. "Fonts." WebAIM. Center for Persons with Disabilities, n.d. Alvarez, Hannah. "Choosing the Right Font: A Guide to Web. 13 Nov. 2014. Typography and UX." UserTesting. UserTesting, 6 Aug. 2014. Web. 13 Nov. 2014. Harris, Will. "The Best Faces for the Screen." Typofile Magazine. Typofile Magazine, 2001. Web. 13 Nov. 2014. Brown, Tim. “Type Rendering on the Web.” The Typekit Blog Type Rendering on Theweb Comments. Typekit, 05 Oct. Hermann, Ralf. "The @Font-Face Rule And Useful Web Font 2010. Web. 07 Oct. 2014. Tricks." Smashing Magazine. Smashing Magazine, 2 Mar. 2003. Web. 13 Nov. 2014. Cheng, Karen. Designing Type. New Haven, CT: Yale UP, 2005. Print. Herrmann, Ralf. "The Onion Layer Model of Legibility." Ralf Herrmann Wayfinding Typography. Ralf Herrmann, 05 May Cabarga, Leslie, and Adam Twardoch. Learn FontLab 2005. Web. 13 Nov. 2014. Fast: A Simplified Guide to Creating Fonts with FontLab, Fontographer, TypeTool and AsiaFont Studio. Los Angeles, Hume, Andy. "The Anatomy of Web Fonts." SitePoint. CA: ICONOCLASSICS Pub., 2008. Print. Microsoft, 2005. Web. 13 Nov. 2014. Appendix 5 of 5

Hunt, Paul D. "Choosing Type for Screen." The Typekit Blog. Teague, Jason C. “What You Need to Know About Webfonts: Adobe Systems Incorporated, 15 Sept. 2010. Web. 13 Nov. Part 1.” CreativePro.com. Creative Pro, 31 Aug. 2011. Web. 2014. 08 Oct. 2014.

Lie, Håkon W. “CSS @ Ten: The Next Big Thing.” A List Apart Will-Harris, Daniel, and Simon Earnshaw. “Georgia & The Full. A List Apart, 28 Aug. 2007. Web. 09 Oct. 2014. Verdana.” Georgia & Verdana: Typefaces Designed for the Screen (finally). Daniel Will-Harris, 2003. Web. 10 Oct. 2014. Nielsen, Jakob. “Nielsen Norman Group.” Serif vs. Sans-Serif Fonts for HD Screens. Nielsen Norman Group, 02 July 2012. Special thanks to the students of GRDS764 Typeface Design, Web. 09 Oct. 2014. Professor Trudy, all my testers, and the many brains I picked along the way! Reynolds, Dan. "How To Choose The Right Face For A Beautiful Body." Smashing Magazine. Smashing Magazine, 12 May 2012. Web. 13 Nov. 2014.

Rhatigan, Dan. “Fonts on Screen by Daniel Rhatigan” Lipotype, 2012. Film. 1 Mar 2014.

Rhatigan, Dan. “Type Choice & Type Use.” Type Choice & Type Use. Monotype Imaging, 23 Sept. 2011. Web. 07 Oct. 2014.

“The Reading Edge Series.” A Group of Fonts for Small Sizes on Screens. The Reading Edge, n.d. Web. 06 Oct. 2014. Glossary

E I J K N Q U V Y Z Glossary 2 of 5

/1!'/ B

@font-face a CSS rule that allows you to define and load Baseline an invisible line where characters sit custom fonts in the browser. Bold set of type characters that are darker and heavier than A normal.

Accessibility the degree to which an environment is C available to as many people as possible. On screen it is the measure at which people with disabilities can use the Web. Cap-Height - the height of capital letters that don't overshoot—such as E, H or I Additive Color System color created by mixing red, green, and blue light. Cascading Style Sheets (CSS) a style sheet language used for describing the look and formatting of a markup Aliasing the jagged horizontal zigzags of curved or diagonal document. lines on a low-resolution monitor. Character a single character in a font or a typeface Anti-Aliasing techniques that combat aliasing. Contrast 1) a measure of visual weight differences between Apertures the enclosed, somewhat rounded negative space the thick and thin strokes of a glyph 2) a measure of the in a glyph. color difference between the foreground and background.

Ascender a part of a lowercase letter that extends above Counter the open space in a fully or partly closed area the x-height. within a letter. Glossary 3 of 5

Counterform negative spatial areas defined and shaped by letterforms, including counters, apertures, and the spaces F between characters. Font-Stack fonts listed in order of preference in a CSS font- family declaration. CSS - see Cascading Style Sheets D G Glyph see character. Descender The part of letters that extends below the baseline. H Distinguishability the characteristic of a letter that makes it easily told apart from every other letter. Also see legibility Hinting process of instructing a fonts individual pixels at and readability. certain sizes

Dots-Per-Inch a measure of the number of individual dots HTML HyperText Markup Language, a set of standards to that can be placed in a line within the span of 1 inch in tag or markup a hypertext document (web page). printed material.

DPI see Dots-Per-Inch L

Legibility the quality of being clear enough to read. E Letter-Spacing (also known as tracking) is the adjustment Em a unit equal to the value of the ‘font-size’ property. of the horizontal white space between letters. Glossary 4 of 5

Line-Spacing the vertical distance between lines of text (also known as leading) R

Rasterize convert an outline into pixels that can be M displayed on a screen.

Metric(s) (font) typographic information (proportions, Readability the ease with which text can be read and width, height, kerning, etc.) in a font. understood.

Resolution the number of pixels on an entire screen O surface.

Optical (Size) in relation to sight, the size it appears not its Retina screens with a resolution and pixel density of 300PPI mathematical value. or more. P S Pixel one of many illuminated areas on a screen that Sans-Serif Typefaces without serifs. compose an image.

Screen area on an electronic device such as a television, Pixels-Per-Inch a measurement of the pixel density of a computer, or smartphone, on which images and data are screen within the span of 1 inch. displayed.

PPI see Pixels-Per-Inch Serif Elements added to the ends of the main strokes of a letterform in serifed type styles. Glossary 5 of 5

Subpixels the red, blue, and green units that make up a Word-Spacing The negative space between words in a pixel. block of type. Word-spacing plays a key role in establishing the color, texture and readability to type. Subtractive Color System is the mixing of a limited set of dyes, inks, paint pigments or other colorants to create a wider range of colors, each the result of partially X or completely subtracting (that is, absorbing) some X-Height - The height of the lowercase letter x in a font. wavelengths of light and not others. T

Text in this book, it is referring to body text, what you are reading right now, text under 16pt. W

Web Content Accessibility Guidelines (WCAG) a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

Web Font - A web font is a typeface installed with a web browser. The term is also used to describe typefaces that can be used on screen.