Transcript Font Usage on the Web

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-Hosted
Web 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'>
• CSS
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.
• 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 rem
target pixels/context pixels=result em
• The em uses the context of parent containers and current container to set
size, for example
body{font-size:16px;}
h1{font-size:1.5em;
line-height:1.25em;
margin: .5em 0 0 0; }
//context is body = 16 * 1.5 = 24px
//context is h1 = 24 * 1.25 = 30px
//context is h1 = 24 * .5 = 12px
• rem – only context is root tag of document (HTML)
html{font-size:100%;}
h1{font-size:1.5rem;
line-height:1.875rem;
margin: .75rem 0 0 0; }
//default is usually 16px
//context is body = 16 * 1.5 = 24px
//context is h1 = 16 * 1.875 = 30px
//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
Myriad Pro overlay in magenta
Trebuchet MS in magenta
Calibri 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 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
h1+p::first-line{font-variant: small-caps; letter-spacing: 0.15em;
• 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 16px @ 1:1.618)
HTML
<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.
CSS
body {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; }
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.
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