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. 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. 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 ) by specifying multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives. In CSS define a font for an element (such as ) 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;} 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;} 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 Various methods for using custom fonts Not INSTALLED on end user’s computer Self-Hosted: Fonts installed on web server for your domain Self-Hosted: Fonts installed on web server for your domain Purchased from Font Foundry, downloaded to your domain, assembled into a kit” Purchased from Font Foundry, downloaded to your domain, assembled into a kit” If free fonts then you will need to use 3 rd party software to kit and be absolutely sure it is legal for you to use the font this way If free fonts then you will need to use 3 rd party software to kit and be absolutely sure it is legal for you to use the font this way Referenced declaration in CSS Referenced declaration in CSS Sometimes a JavaScript file must also be linked to HTML Sometimes a JavaScript file must also be linked to HTML Hosted: Fonts downloaded from 3 rd party servers Hosted: Fonts downloaded from 3 rd party servers Sometimes free but may include monthly fee for usage Sometimes free but may include monthly fee for usage Google Fonts, Adobe TypeKit Google Fonts, Adobe TypeKit Referenced using link tag in head of HTML Referenced using link tag in head of HTML

Self-Hosted Web Font Kit files Example from MyFonts.com

Self-Hosted, CSS example /*default version*//*default {font-family: ; src: {font-family: 'lovelyFont'; src: url('fonts/lovely_font.eot'); src:url('fonts/lovely_font.otf') format('opentype'); }src:url('fonts/lovely_font.otf') format('opentype'); } /*bold version*//*bold {font-family: ; src: {font-family: 'lovelyFont'; src: url('fonts/lovely_font_bold.eot'); src: url('fonts/lovely_font_bold.otf') format('opentype');src: url('fonts/lovely_font_bold.otf') format('opentype'); font-weight: bold; }font-weight: bold; } p{ font-family:, sans-serif; }p{ font-family: lovelyFont, sans-serif; } strong{font-family:, sans-serif; font-weight: bold; }strong{font-family: lovelyFont, sans-serif; font-weight: bold; }

Hosted Example, Google Open Sans HTML HEAD HTML HEAD CSS CSS P{font-family: 'Open Sans', sans-serif;}P{font-family: 'Open Sans', sans-serif;}

Modular Scale There should be thought given to the relative sizing of a font for a web site. 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. Modular scales add a consistent hierarchy to your typography by making your sizing decisions using numbers from the scale Decide base font size  14px (default 1em) Decide base font size  14px (default 1em) For example, use the golden ratio of 1 to as your scale For example, use the golden ratio of 1 to as your scale H1 (default 2em, 28) = H1 (default 2em, 28) = H2 (default 1.5em, 21) = H2 (default 1.5em, 21) = H3 (default 1.17em, 16) = H3 (default 1.17em, 16) = H4 (default 1em, 14) = 14 H4 (default 1em, 14) = 14 H5 (default.83em, 11) = H5 (default.83em, 11) = H6 (default.67em, 9) = H6 (default.67em, 9) = 5.348

Fonts: Units of Measure pixel - non responsive absolute unit of measure pixel - non responsive absolute unit of measure Body{font-size:16px;} Body{font-size:16px;} percent - responsive absolute unit of measure dependent on context percent - responsive absolute unit of measure dependent on context Body{font-size:100%;} // correlates to default browser settings, usually 16px Body{font-size:100%;} // correlates to default browser settings, usually 16px em - responsive relative unit of measure dependent on context 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 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  rem – NEW CSS3 responsive relative unit of measure dependent only on root tag (HTML) (browser support got to  Body{font-size:1rem;} // same as size set in HTML font-size declaration Body{font-size:1rem;} // same as size set in HTML font-size declaration

Context: em versus rem target pixels/context pixels=result em The em uses the context of parent containers and current container to set size, for example 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 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) rem – only context is root tag of document (HTML) html{font-size:100%;} //default is usually 16pxhtml{font-size:100%;} //default is usually 16px h1{font-size:1.5rem; //context is body = 16 * 1.5 = 24px line-height:1.875rem; //context is h1 = 16 * = 30px margin:.75rem 0 0 0; } //context is h1 = 16 *.75 = 12px h1{font-size:1.5rem; //context is body = 16 * 1.5 = 24px line-height:1.875rem; //context is h1 = 16 * = 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 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? Examples, Are these good font stacks? How can you know? font-family: "Noto Sans", "Myriad Pro", Helvetica, Arial, Verdana, sans-serif; font-family: "Noto Sans", "Myriad Pro", Helvetica, Arial, Verdana, sans-serif; font-family: "Garamond Pro", Georgia, "Times New Roman", Times, 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 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 Letter height, x-height and cap height as well as height of crossbars Height of ascenders and descenders Height of ascenders and descenders Letter width, width of counters and loop Letter width, width of counters and loop Tracking and Kerning: Space between letters Tracking and Kerning: Space between letters Line height: space between baselines Line height: space between baselines baseline

FFFFallback used to compare 2 fonts: font in use Verdana VerdanaArial overlay in magenta Trebuchet MS in magentaCalibri overlay in magenta Myriad Pro overlay in magenta Noto Sans overlay in magenta

Readable Line Length Line Length should be in the range of characters Line Length should be in the range of characters Chris Coyier of css-tricks.com has put together a handy bookmarklet that will actually highlight/colorize the 45th through 75 th character of any given line. Chris Coyier of css-tricks.com has put together a handy bookmarklet that will actually highlight/colorize the 45th through 75 th character of any given line. You drag the button up to your bookmarks bar, then click it on any site you want to use it on. 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). 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. 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 h1 Drop Cap for first letter of paragraph that follows an h1 h1+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 caps First line all small caps h1+p::first-line{font-variant: small-caps; letter-spacing: 0.15em;h1+p::first-line{font-variant: small-caps; letter-spacing: 0.15em; Text Shadow Text Shadow h1 {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 1:1.618) HTML CSS

Identifying Quality Web Fonts Most fonts provide a font specimen page that we can use to perform browser testing. 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 ( Create your own type specimen page using the web font specimen template provided by Tim Brown ( Viewing these custom specimen pages in a variety of browsers will give you firsthand knowledge as to how the font performs. 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 (Chrome Extension) to identify what font that is, and make a little mental note for future use in your own projects. 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 (Chrome Extension) to preview a font from the Google collection in use on your own page. 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.

Google Font Previewer 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