Font Usage on the Web

Used to be true that …

• Normally end users can only see the fonts that are already installed on their computers. • If not installed, browsers will show some other font that is on

the user’s computer.• In CSS define a font for an element (such as <p>) by

specifying multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives.• h1,h2,h3,h4,h5,h6{font-family: "Myriad Pro", Helvetica, Arial, Verdana,

sans-serif;}• body{font-family: "Garamond Pro", "Times New Roman", Times, serif;}

But Now …

• Various methods for using custom fonts Not INSTALLED on end user’s computer• Self-Hosted: Fonts installed on web server for your domain

• Purchased from Font Foundry, downloaded to your domain, assembled into a “@font-face kit”• If free fonts then you will need to use 3rd party software to create @font-face kit

and be absolutely sure it is legal for you to use the font this way• http://www.fontsquirrel.com/tools/webfont-generator

• Referenced using @font-face declaration in CSS• Sometimes a JavaScript file must also be linked to HTML

• Hosted: Fonts downloaded from 3rd party servers• Sometimes free but may include monthly fee for usage

• Google Fonts, Adobe TypeKit• Referenced using link tag in head of HTML

Self-HostedWeb Font Kit files Example from MyFonts.com

Self-Hosted, CSS code@font-face example

/*default version*/@font-face {font-family: 'lovelyFont'; src: url('fonts/lovely_font.eot');

src:url('fonts/lovely_font.otf') format('opentype'); }/*bold version*/@font-face {font-family: 'lovelyFont'; src: url('fonts/lovely_font_bold.eot');

src: url('fonts/lovely_font_bold.otf') format('opentype');font-weight: bold; }

p{ font-family: lovelyFont, sans-serif; }strong{font-family: lovelyFont, sans-serif; font-weight: bold; }

Hosted Example, Google Open Sans

• HTML HEAD<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800' rel='stylesheet' type='text/css'>

• CSSP{font-family: 'Open Sans', sans-serif;}

Modular Scale

• There should be thought given to the relative sizing of a font for a web site.• Modular scales add a consistent hierarchy to your typography by making

your sizing decisions using numbers from the scale.• http://modularscale.com

• Decide base font size 14px (default 1em)• For example, use the golden ratio of 1 to 1.618 as your scale

• H1(default 2em, 28) = 59.301• H2(default 1.5em, 21) = 36.651• H3(default 1.17em, 16) = 22.652• H4(default 1em, 14) = 14• H5(default .83em, 11) = 8.653• H6(default .67em, 9) = 5.348

Fonts: Units of Measure

• pixel - non responsive absolute unit of measure• Body{font-size:16px;}

• percent - responsive absolute unit of measure dependent on context• Body{font-size:100%;} // correlates to default browser settings, usually 16px

• em - responsive relative unit of measure dependent on context• Body{font-size:1em;} // same as size set in HTML font-size declaration or same as default

• rem – NEW CSS3 responsive relative unit of measure dependent only on root tag (HTML) (browser support got to http://canIuse.com)• Body{font-size:1rem;} // same as size set in HTML font-size declaration

Context: em versus remtarget pixels/context pixels=result em• The em uses the context of parent containers and current container to

set size, for examplebody{font-size:16px;}h1{font-size:1.5em; //context is body = 16 * 1.5 = 24px line-height:1.25em; //context is h1 = 24 * 1.25 = 30px margin: .5em 0 0 0; } //context is h1 = 24 * .5 = 12px

• rem – only context is root tag of document (HTML)html{font-size:100%;} //default is usually 16pxh1{font-size:1.5rem; //context is body = 16 * 1.5 = 24px line-height:1.875rem; //context is h1 = 16 * 1.875 = 30px margin: .75rem 0 0 0; } //context is h1 = 16 * .75 = 12px

Effective Font Stacks

• Font Stacks are your fallback for a hosted web font that doesn’t load or for the end user not having the font you want to use• Examples, Are these good font stacks? How can you know?

• font-family: "Noto Sans", "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;

• font-family: "Garamond Pro", Georgia, "Times New Roman", Times, serif;• FFFFallback.com – bookmarklet tool that will allow you to

compare our preferred font to an alternate font

Effective Font Stacks: Parts of letterforms to compare for fonts in stack• Letter height, x-height and cap height as well as height of crossbars• Height of ascenders and descenders• Letter width, width of counters and loop• Tracking and Kerning: Space between letters• Line height: space between baselines

baseline

FFFFallback used to compare 2 fonts:font in use Verdana

Verdana Arial overlay in magenta

Trebuchet MS in magenta Calibri overlay in magenta

Myriad Pro overlay in magenta

Noto Sans overlay in magenta

Readable Line Length

• Line Length should be in the range of 45-75 characters• Chris Coyier of css-tricks.com has put together a handy

bookmarklet that will actually highlight/colorize the 45th through 75th

character of any given line. • http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-

testing/• You drag the button up to your bookmarks bar,

then click it on any site you want to use it on.• First you click it to activate it, then you click

it on a body copy element (like a paragraph).• Then you can resize the window around to see

where the line is breaking and try to get it close.

Bookmarklet Colorizing Readable Line Length – characters 45 to 75 are red in selected content

Miscellaneous Style Rules

• Drop Cap for first letter of paragraph that follows an h1h1+p::first-letter{font-family: “Trajan Pro”, serif; font-size: 4em, float: left; color:#800020; line-height: 0.65; padding: 0.085em 3px 0 0;

• First line all small capsh1+p::first-line{font-variant: small-caps; letter-spacing: 0.15em;

• Text Shadowh1 {text-shadow: 1px 1px 1px #000;} /* x offset, y offset, blur amount, color-can be expressed as rgba with alpha: rgba(255, 255, 255, 0.4) */

Example: Visually Interesting Use of Fonts

H1

H2

H3

p:nth-of-type(1):first-letter

Code for Previous Example(uses Modular Scale 16px @ 1:1.618)

HTML CSSbody {font-size:16px; line-height:25px; font-family: Georgia, Times, serif; color:#333;}article {width:80%;max-width:800px;margin: auto;}h1 {font-size:67px; line-height:67px; margin:67px 0 0 0; text-align: center;}h2 {font-size:41px; line-height:41px; margin:16px 0; font-style: italic; color:#545454; text-align: center;}h3 {font-size:16px; margin:16px 0;font-weight: normal; text-transform: uppercase; font-family: Helvetica, Verdana, sans-serif; color:#5a7792; text-align: center;}p:nth-of-type(1):first-letter {font-size:109px; line-height:82px; float: left; color:#47a6ff; padding: 0px 6px 0px 4px; }

<body><article><h1>Adventure V. The Five Orange Pips</h1><h2>From The Adventures of Sherlock Holmes</h2><h3>By Sir Arthur Conan Doyle</h3><p>When I glance over my notes and records of the Sherlock Holmes cases between the years ’82 and ’90, I am faced by so many which present strange and interesting features that it is no easy matter to know which to choose and which to leave.

Identifying Quality Web Fonts

• Most fonts provide a font specimen page that we can use to perform browser testing.• Create your own type specimen page using the web font specimen

template provided by Tim Brown (http://webfontspecimen.com/).• Viewing these custom specimen pages in a variety of browsers will give you

firsthand knowledge as to how the font performs.• If you happen to a font you find especially readable while your

surfing the web, you can use Whatfont (Chrome Extension) to identify what font that is, and make a little mental note for future use in your own projects.• Use Google Font Previewer (Chrome Extension) to preview a

font from the Google collection in use on your own page.

WhatFont Chrome Extension

Inspect and identify web fonts by just hovering on them. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

GoogleFontPreviewer

Choose a font from the Google font directory and preview it in use on the current tab; includes a few styling options

Partial Example of Web Font Specimen