CSS Typography

Typefaces, Fonts, & Formatting

R. Scott Granneman

Jans Carton

© 2007 R. Scott Granneman

Last updated 2015-10-13
You are free to use this work, with certain restrictions.
1.11 For full licensing information, please see the last slide/page.
 Notes & URLs for this presentation can be found…

» underneath the link to this slide on granneman.com

» at files.granneman.com/presentations/webdev/CSS-
Typography.txt
Why?
“Sometimes I get emotional over fonts.” —Kanye West
“95% of the information on the web is written language.
It is only logical to say that a web designer should get
good training in the main discipline of shaping written
information, in other words: Typography.” —iA
(Information Architects Inc.)
“[T]ypography is important for one reason: because it is
the primary way that designers can communicate with
readers…

When it comes to web design, typography … is the art

of dividing up bundles of information in such a way
that the reader will have a good chance of finding what
is of interest to him…”
First Big Bank of America

First Big Bank of America

First Big Bank of America

First Big Bank of America

“From a child I was fond of Reading, and all the little
Money that came into my Hands was ever laid out in
Books. … Often I sat up in my Room reading the greatest
Part of the Night, when the Book was borrow’d in the
Evening and to be return’d early in the Morning lest it
should be miss’d or wanted.” —The Autobiography of
Benjamin Franklin
Basics
Types
Most basic:

Serif

Sans-serif

Monospaced/Monospaced
 Serif font

Serif font with serifs in red

Sans-serif font
1 x-height 11 counter
2 ascender line 12 collar
3 apex 13 loop
4 baseline 14 ear
5 ascender 15 tie
6 crossbar 16 horizontal bar
7 stem 17 arm
8 serif 18 vertical bar
9 leg 19 cap height
10 bowl 20 descender line
1 x-height 11 counter
2 ascender line 12 collar
3 apex 13 loop
4 baseline 14 ear
5 ascender 15 tie
6 crossbar 16 horizontal bar
7 stem 17 arm
18 serif 18 vertical bar
19 leg 19 cap height
10 bowl 20 descender line
Measure
Measure

Length of a line of text

Measure should be pleasing to the eye & facilitate

reading
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Shoot for between 40-80 characters, including spaces

~ 65 characters is ideal

Of course, this becomes quite difficult with Responsive

Web Design
Leading
Leading

Space between lines of type

Very important for readability

The longer the measure, the more leading is needed

The larger the font, the less leading is needed

Leading of 0.8

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Leading of 1.7

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut.
Leading of 1.3

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Rough rule of thumb: using the line-height property,
set leading ~1.3 times your font size
* {
font-family: Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3;
}

Same as:

* {
font: 1em/1.3 Helvetica, sans-serif;
}
Scale
Do not size text arbitrarily

Use a scale for your fonts

The Classical Scale

6 7 8 9 10 11 12 14 16 18 21 24

36 48 60 72
Fibonacci sequence scale

8 13 21 34 55 89
The W3 provides a very usable, standard scale
<absolute-size> Scaling Factor HTML hx
xx-large 2/1 <h1>
x-large 3/2 <h2>
large 6/5 <h3>
medium 1 <h4>
small 8/9 <h5>
x-small 3/4
xx-small 3/5 <h6>
body {font: 1em/1.3 "Lucida Grande";}
h1, h2, h3, h4, h5, h6 {font-family: Georgia;}
h1 {font-size: 200%;}
h2 {font-size: 150%;}
h3 {font-size: 120%;}
h4 {font-size: 100%;}
h5 {font-size: 89%;}
h6 {font-size: 60%;}
Common Fonts
& Defaults
Microsoft’s
Core Fonts
for the Web
Provided by Microsoft royalty-free 1996-2002

Still legally available all over the Web & on all Macs
“Arial is just an ugly bastard son of Helvetica.” —King
Sidharth
Still included in Windows
(why?!?)

Never use Comic Sans

“childish and inappropriate … for most purposes”

“much-maligned” … “much-mocked and widely-reviled”

“the favored font of middle-school breakup letters everywhere”

“analogous to showing up for a black tie event in a clown costume”

“…probably the worst font ever to grace the computer screen.

Normally a staple among six year old[s] and grandmothers”

“oh-so-mockable … Unless you’re a fourth-grader, or being ironic, or

the author of a comic book, or on vacation from the 1990s, never
use that typeface.”
 Microsoft
ClearType
Font Collection
 Introduced with:

» Windows Vista
» Office 2007 for Windows
» Office 2008 for Mac OS X
Default body type face in
Word, Excel, PowerPoint,
& Outlook since Office
2007
Default header type face in
Word, Excel, PowerPoint,
& Outlook since Office
2007
Monospaced font that’s
become pretty popular
with developers

O0
1lI
,.;:
Web Browser
Defaults
OS Browser Sans-Serif Serif Monospace

Times New Roman Courier New

Arial *
Batang

Arial Times New Roman Courier New

Helvetica Times Courier

sans-serif serif monospace

* IE 9 & 10; 11 switches back to Times New Roman

OS Browser Standard Fixed-Width

Times New Roman Courier New

Times Courier

Safari for Windows hasn’t been updated since 2011

(5.1.7)

Since Safari 6, user stylesheets are the only way for

users to change defaults
OS Browser Sans-Serif Serif Mono
Courier New
Arial Times New Roman *
Consolas

Helvetica times-roman Courier

sans serif monospace

* Windows 7 & up
OS Browser Sans-Serif Serif Mono

Helvetica Times Courier

Droid Sans
Droid Sans Droid Serif
Mono

Arial Times New Roman Courier New

 Font
Properties
 font-size

line-height

font-style

font-variant

font-weight

font-family
font-size
 font-size

Sets size of fonts

Values
» <absolute-size>
» <relative-size>
» <length> data type
» <percentage> data type
<absolute-size> Scaling Factor HTML hx
xx-large 2/1 <h1>
x-large 3/2 <h2>
large 6/5 <h3>
medium 1 <h4>
small 8/9 <h5>
x-small 3/4
xx-small 3/5 <h6>
<relative-size>

larger
smaller
 <length>

Represents distance measurements: a <number>

immediately followed by a unit

Units
» Absolute
» Font-relative
» Viewport-percentage
Pixel means
picture element

Pixels are not

just for computers!
The basic unit of an electronic display is a pixel

All length measurements eventually get counted in

pixels
For years, computer pixels were all 1/72 of an inch

Apple introduced the first high resolution devices that

have much smaller pixels (300+ in an inch!)

The size of pixels in modern high resolution devices

varies hugely

Thanks to these 2 changes, the size of a pixel in CSS had

to be redefined
For good old “standard resolution” displays, a pixel is
(still a device pixel, which is) 1/72 inch

For high resolution displays (& other high resolution

media like print) a CSS pixel is now about 1/96 inch

So now it may take several device pixels to equal 1 CSS

pixel
Absolute <length>
px

mm

cm

in

pt

pc
px 96 pixels per inch

mm 1 millimeter

cm 1 centimeter = 10 mm

in 1 inch = 2.54 cm

pt 1 point = 1/72 in

pc 1 pica = 12 pt
Font-Relative <length>
em

ex

ch

rem
ex

x-height of font

1ex ≈ 0.5em
ch

Width of 0 (zero)
em

Originally width of capital M

Represents the calculated font-size of an element

1 em is the height of a font

rem

Represents the font-size of the root element (<html>)

Great for creating perfectly scalable layouts

 em 5.5 1 1 1 1 1

ex 5.5 1 1 1 1 1

ch 9 — 27 1 — ?

rem 9 4.1 4 3.6 2.1 4

Viewport-Percentage <length>
vh 1% of the viewport’s height

vw 1% of the viewport’s width

1% of the viewport’s height or width—

vmin
whichever is smaller
1% of the viewport’s height or width—
vmax
whichever is larger
 vh 10 6.1 26 19 4.4 8

vw 10 6.1 26 19 4.4 6.1

vmin 10 6.1 26 19 4.4 6.1

vmax 6.1 26 19 4.4 8

<percentage>
Relative to parent’s font size

150%
Our recommendation

px for <html>

rem for regions (sectioning elements & <div>) in which

you want all the text to zoom uniformly

em for actual text elements & non-inherited properties

(e.g., margin & padding)
line-height
 line-height

Specifies the minimal height of line boxes within block

box elements

Values
» normal: Desktop browsers use a default value of roughly
1.2
» <number>: unitless number (e.g., 1.4) is the preferred
method
» <length>: em in particular may be problematic
» <percentage>: may be very problematic
Unitless <number> is the preferred way to set line-
height

font-size: 1em;
line-height: 1.4;
font-style
italic oblique

Cursive Sloped

Specially-designed font Computer simulates italic

font-variant
normal Charles Dexter Ward

small-caps CHARLES DEXTER WARD

font-weight
 font-weight

Specifies the weight—or boldness—of the font

Values
» normal: Same as 400
» bold: Same as 700
» bolder: 1 font weight darker than parent
» lighter: 1 font weight lighter than parent
» 100–900: Numeric weights from lightest to darkest

This assumes the font supports those weights!

100 Thin
200 Extra/Ultra Light
300 Light
400 Normal/Regular/Book normal
500 Medium
600 Semi/Demibold
700 Bold bold
800 Extra/Ultra Bold
900 Black/Heavy
font-family
 font-family

Prioritized list of font family names and/or generic

family names for the selected element

Values
» <family-name>: name of a font family, e.g., Lato or
"Iowan Old Style" (quotation marks if spaces!)
» <generic-family>: name of a generic fallback font
family
generic-family can be:

serif
sans-serif
cursive
fantasy
monospace
font-family: cursive

Savoye LET

Snell Roundhand

o
font-family: fantasy

Party LET

Chalkduster

Playbill
Jazz LET

Harrington
Font Stacks
List fonts in the order you want them to be used,
from most specific to generic

font-family: "DejaVu Serif", Constantia,

Georgia, serif;

With font embedding (coming later!), this list has

gotten shorter

font-family: Lato, Verdana, sans-serif;

The order:

Ideal, Alternative, Common, Generic

A great rule of thumb

Serifs for headers & sans-serifs for body

OR

Sans-serifs for headers & serifs for body

Narrow sans-serif header font stack
Marco Arment’s The Magazine

"Avenir Next Condensed", "Helvetica Neue

Condensed", "Arial Narrow", Avenir, "Helvetica
Neue", "Arial Narrow", sans-serif;
Wide serif body font stack
Marco Arment’s The Magazine

"Minion Pro", Georgia, serif;

 Text
Properties
color text-indent

text-shadow white-space

letter-spacing word-break

word-spacing overflow-wrap (word-wrap)

text-decoration direction

text-transform unicode-bidi
font-size, font-weight, font-family, but also text-
decoration, text-transform, & text-indent?

Why the split between font- & text-?

font- defines the shapes of typefaces on the screen

text- defines positioning or visual changes to already-

drawn characters, independent of typeface
color

Specifies foreground color of text using <color> data

type

Should really be text-color, but it’s too late to change

now
Descriptor Value
Keywords magenta

RGB 6-character hexadecimal #FF0033

RGB 3-character hexadecimal #F03

RGB functional notation (integer) rgb(255,0,51)

RGB functional notation (%) rgb(100%,0%,20%)

Red-Green-Blue-Alpha rgba(255,0,51,0.7)

Hue-Saturation-Lightness hsl(348,100%,50%)

Hue-Saturation-Lightness-Alpha hsla(348,100%,50%,0.7)
Color keywords

CSS 1: 16

CSS 2: 1

CSS 3: 128
Numeral system

Humans use base 10: 0–9

Computers use base 2 (binary): 0 & 1

Colors can be expressed with hexadecimal: 0–F (0–9,

then A–F)
Hexadecimal notation

#RRGGBB

00: no color at all

FF: full color

#000000: no red, no green, no blue, so black

#FFFFFF: full red, full green, full blue, so white

#FF0000 (or #ff0000): full red, no green, no blue

#00FF00: no red, full green, no blue

#0000FF: no red, no green, full blue

#FFFF00: full red, full green, no blue

#00FFFF: no red, full green, full blue

#E19427: almost full red, a bit over halfway green, low

blue
#RGB

If all three color components (the R, G, & B) are

matching pairs, you can abbreviate the notation

#FF0000 → #F00
#33AA77 → #3A7
#BBFF33 → #BF3
#DDEEFF → #DEF
 RGB notation

rgb(R,G,B)

Expressed as either:

» integers between 0 (black) & 255 (white)

» percentages between 0 (black) & 100% (white)
 May add a 4th place for transparency: alpha channel

rgba(R,G,B,A)

The alpha channel is a number between 0 & 1, where:

» 0 is fully transparent
» 1 is fully opaque

rgb(255,0,0) → rgba(255,0,0,0.5)
rgb(0,255,201) → rgba(0,255,201,0.66)
 Hue
» color
» integer between 0 & 360

Saturation (AKA chroma)

» intensity or purity of a hue
» percentage between 0 & 100%

Lightness
» relative degree of black or white mixed with a hue
» percentage between 0 & 100%
 May add a 4th place for transparency: alpha channel

hsla(H,S,L,A)

The alpha channel is a number between 0 & 1, where:

» 0 is fully transparent
» 1 is fully opaque

hsl(360,100%,100%) → hsla(360,100%,100%,0.5)
hsl(165,87%,100%) → hsla(165,87%,100%,0.66)
Special keywords

transparent
Fully transparent, the same as rgba(0,0,0,0)

currentcolor
Value of parent element’s color
Instead of this: Use this:

p { color: #333; } p { color: #333; }

p a { p a {
text-decoration: none; text-decoration: none;
color: #333; color: currentcolor;
font-weight: bolder; font-weight: bolder;
display: inline-block; display: inline-block;
padding-bottom: .5rem; padding-bottom: .5rem;
border-bottom: 1px border-bottom: 1px
dashed #333; dashed currentcolor;
} }
You can use currentcolor in places that inherit will
not work: e.g., gradients (coming up later!) &
background-color

body {
color: #f0f;
}

hr {
height: 10px;
background: currentcolor;
}
body {color: #f0f;}
hr {
height: 10px;
background: currentcolor;
}

inherit forces a value to be set from its parent, but

only for the same property

In other words, background-color: inherit only

looks at parent’s background-color, while
background-color: currentcolor looks at parent’s
color (a different property!)
 keywords 3 1 1 1 1 1
#RRGGBB
3 1 1 1 1 1
#RGB
rgb() 4 1 1 1 1 1
hsl() 9 3.1 1 1 2.3 5.1
rgba() 9 3.1 1 3 2.3 5.1
hsla() 9 3.1 1 3 2.3 5.1
transparent 9 3.1 1 3 ? ?
currentColor 9 4 1 1.5 ? ?
text-shadow

Adds shadow(s) or glow effects to text

text-shadow 10 1.1 2 3.5 ? ?
letter-spacing

Add additional spacing between adjacent characters

(like part of kerning)

word-spacing

Add additional spacing between words

Do not use either property, as browser support is poor

& the effects are crude & ugly
 text-decoration

Insert or remove lines above, below, & through text

Values
» underline: draws a line under text (do not use)
» overline: draws a line above text
» underline overline: draws lines under & above text
» line-through: draws line through text (like <s>)
» none: removes lines (from <a> in particular, but be
careful with this!)
 text-transform

Specifies capitalization

Values
» capitalize: capitalize every word (headline case)
» uppercase: capitalize every letter (all caps)
» lowercase: lowercase every letter
» none: do not change capitalization
Typesetter’s sorting case

Capital letters stored in a

separate drawer/case
located above the case
holding the other letters

Hence uppercase &

lowercase
 text-indent

Specifies how much horizontal space should be before

the beginning of the first line of the text

Values
» <length> data type
» <percentage> data type
p:first-child {text-indent: 1em;}
p:nth-child(2) {
width: 90%;
margin-left: auto;
margin-right: auto;
text-indent: -1em;
}
 Line Box
Properties
 text-align

Specifies how inline content is aligned in its parent

block element

Values
» left: align left (default)
» right: align right
» center: center content
» justify: left & right edges of content line up to left &
right edges of container (do not use!)
“Justifying text can present problems for people with
Dyslexia … Another user group affected by text
justification is screen magnification users.

The Web Content Accessibility Guidelines (WCAG) 2.0

recommend that text be left-justified…”
Multi-Column
Layout
 columns

column-count

column-width

column-rule

column-gap
 3.1 4 2 2.1 3.2
column-count 10 -webkit- -webkit- -moz- -webkit- -webkit-

3.1 4 2 2.1 3.2

column-width 10 -webkit- -webkit- -moz- -webkit- -webkit-

3.1 4 2 2.1 3.2

column-gap 10 -webkit- -webkit- -moz- -webkit- -webkit-

3.1 4 2 2.1 3.2

column-rule 10 -webkit- -webkit- -moz- -webkit- -webkit-

3.1 4 2 2.1 3.2

column-span 10 -webkit- -webkit- -moz- -webkit- -webkit-
Embedded
Fonts
Wouldn’t it be nice if you could use any font you wanted
& users could automatically download & use the font?
Formats
EOT: Embedded OpenType

Designed by Microsoft for embedding on webpages

DRM used to prevent fonts from being copied & used

without a license

Submitted to W3 for consideration, but rejected

WOFF: Web Open Font Format

Developed during 2009 by Mozilla

Wrapper containing fonts in various formats

(TrueType, OpenType, or Open Font) encoded with ZIP
compression

W3 Recommendation as of 2012
WOFF2: Web Open Font Format 2.0, AKA WOFF Ultra
Condensed

Developed by Google Web Fonts team

30% better compression than WOFF 1

W3 Editors Draft as of April 2015

 SIDE NOTE

Server admins should disable GZIP compression for

WOFF files, because WOFF is already compressed
 EOT 4

TTF 3.5 3.1 4 10

OTF 3.5 3.1 10

WOFF 9 3.6 5.1 6 11.1

WOFF2 36 24

SVG 3.1 4 10
@font-face
CSS2 introduced @font-face
@font-face {
font-family: <font-name>;
src: <source>, <source>;
}
src

Location of font

Can be local or remote

@font-face {
font-family: Foobar;
src: local(Foobar.ttf);
}

p {
font-family: Foobar, sans-serif;
}
@font-face {
font-family: Foobar;
src: local(Foobar.ttf);
}
Local font on user’s device
p {
font-family: Foobar, sans-serif;
}
 Can use any name (value)
for font-family you want
@font-face {
font-family: Foobar;
src: local(Foobar.ttf);
}
Local font on user’s device
p {
font-family: Foobar, sans-serif;
}
@font-face {
font-family: Foobar;
src: url(http://www.fonts.com/foobar.woff);
}

p {
font-family: Foobar, sans-serif;
}
@font-face {
font-family: Foobar;
src: url(http://www.fonts.com/foobar.woff);
}
Remote font downloaded
onto user’s device
p {
font-family: Foobar, sans-serif;
}
@font-face {
font-family: Foobar;
src: local(Foobar.ttf),
url(http://www.fonts.com/foobar.woff);
}

p {
font-family: Foobar, sans-serif;
}
 Local AND remote
covers all bases—
@font-face {
but don’t use local!
font-family: Foobar;
src: local(Foobar.ttf),
url(http://www.fonts.com/foobar.woff);
}

p {
font-family: Foobar, sans-serif;
}
Licensing
 Problem: unauthorized copying, which type foundries
do not want

Solution:

» Open, free fonts

» Licensed fonts
Open, free fonts
openfontlibrary.org/en
theleagueofmovabletype.com
www.google.com/fonts
“All of the fonts are Open Source… You can even
customize them for your own use… And you can use
them in every way you want, privately or commercially
—in print, on your computer, or in your websites.”
—Google
hellohappy.org/beautiful-web-type/
bueltge.de/free-web-font-combinations/
somadesign.ca/demos/better-google-fonts/
www.fonts.com/web-fonts/google
<head>
<link rel="stylesheet" href=“http://
fonts.googleapis.com/css?family=Bitter:700|Pontano
+Sans&subset=latin-ext”>

<style>
h1, h2, h3, h4 {
font-family: Bitter, serif;
}

p {
font-family: “Pontano Sans”, sans-serif;
}
</style>
</head>
<head>
<link rel="stylesheet" href="http://
fonts.googleapis.com/css?family=Bitter:700|
Pontano+Sans&subset=latin-ext">

<link rel="stylesheet" href="styles/

main.css">
</head>
<head>
<link rel="stylesheet" href="styles/main.css">
</head>

main.css

@import url(http://fonts.googleapis.com/css?
family=Bitter:400,700|Pontano+Sans);

h1, h2, h3, h4 {

font-family: Bitter, serif;
}

p {
font-family: “Pontano Sans”, sans-serif;
}
One bad hidden “feature” of Google Fonts

Say you want to get the @font-face code for Oswald…

If you use Chrome to get the code:

@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-
Regular'), url(http://fonts.gstatic.com/s/
oswald/v10/Qw6_9HvXRQGg5mMbFR3Phn-
_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
}
If you use Safari to get the code:

@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-
Regular'), url(http://fonts.gstatic.com/s/
oswald/v10/lXoKq2PC8Z_S1wl-BwvrB-
vvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
}
If you use Firefox to get the code:

@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-
Regular'), url(http://fonts.gstatic.com/s/oswald/v10/
_P8jt3Y65hJ9c4AzRE0V1OvvDin1pK8aKteLpeZ5c0A.woff2)
format('woff2'), url(http://fonts.gstatic.com/s/
oswald/v10/qpy-UiLNKP-VfOdbcs6r6-
vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
If you use Internet Explorer 11 to get the code:

@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-
Regular'), url(http://fonts.gstatic.com/s/
oswald/v10/-g5pDUSRgvxvOl5u-a_WHw.woff)
format('woff');
}
 To recap:

» WOFF2: 44%
» TTF: 91%
» WOFF: 88%
 So always use Firefox when working with Google
Fonts

That way, you get:

» WOFF (for all modern browsers)

» WOFF2 (for cutting-edge browsers & the future)
Licensed fonts
“Prices start at $2.50/year per font

Typical price is $7.50/year per font”

typekit.com
“Typekit is available standalone or as part of Adobe’s
Creative Cloud service. As part of a Creative Cloud
complete subscription, you’ll receive a Typekit
Portfolio plan with access to our full library of fonts.”
—Typekit.com
Thank you!

[email protected]
www.granneman.com
ChainsawOnATireSwing.com
@scottgranneman

[email protected]
websanity.com
Batang
Bonus
The following slides contain extra, bonus information
that we don’t have time to cover in class
Basics
Types
Adobe Type Classifications
Adobe Originals Greek Sans Serif: Grotesque,
Neo-Grotesque,
Blackletter Hand-tooled, Inline, Geometric and Humanist
Outline, Stencil
Capitals Script
Japanese
Computer Related Slab Serif
Mathematical
Cyrillic Small Caps & Old Style
Monospaced Figures
Decorative & Display
OpenType Pro Swash
Didone (Modern)
Opticals Symbol
Expert Collection Ornamentals
Transitional
Garalde Oldstyle Phonetic
Venetian Oldstyle
Glyphic
Typography
& the Web
Operating System
Defaults
WINDOWS WINDOWS WINDOWS WINDOWS WINDOWS WINDOWS
95 98 2000 XP Vista 7
Fonts New Fonts New Fonts New Fonts New Fonts New Fonts
Arial Abadi MT Condensed Light Comic Sans MS Estrangelo Edessa Cambria Gabriola
Arial Bold Aharoni Bold Comic Sans MS Bold Franklin Gothic Medium Calibri Segoe Print
Arial Bold Italic Arial Black Georgia Franklin Gothic Med. Italic Candara Segoe Print Bold
Georgia Bold Gautami Segoe Script
Arial Italic Book Antiqua Consolas
Georgia Bold Italic
Courier Calisto MT Kartika Constantina Segoe Script Bold
Georgia Italic
Courier New Century Gothic Impact Latha Corbel Segoe UI Light
Courier New Bold Century Gothic Bold Mangal Lucida Console Nyala Segoe UI Semibold
Courier New Bold Italic Century Gothic Bold Italic Microsot Sans Serif Lucida Sans Demibold Segoe UI Segoe UI Symbol
Courier New Italic Century Gothic Italic Palatino Linotype Lucida Sans Demibold Italic
Modern Comic San MS Palatino Linotype Bold Lucida Sans Unicode
MS Sans Serif Comic San MS Bold Palatino Linotype Bld Italic Modern
MS Serif Copperplate Gothic Bold Palatino Linotype Italic Mv Boli
Roman Plantagenet Cherokee
Small Fonts Copperplate Gothic Light
Script
Symbol Impact Raavi NOTE:
Trebuchet MS
Times New Roman Lucida Console Script he new Vista fonts are the
Trebuchet MS Bold
Times New Roman Bold Lucida Handwriting Italic Shruti newer cleartype format
Trebuchet MS Bold Italic
Times New Roman Italic Lucida Sans Italic Sylfaen designed for the new Vista
Trebuchet MS Italic
display technology. Microsot
Times New Roman Bld Italic Lucida Sans Unicode Wingdings Tunga
designed these to become
Wingdings Marlett Vrinda
replacements for:
Matisse ITC WST_Czec
News Gothic MT WST_Engl Cambria = Georga and
News Gothic MT Bold WST_Fren Times New Roman
News Gothic MT Italic WST_Germ Calibri = Arial
OCR A Extended WST_Ital
Candara = Trebuchet MS and
Tahoma WST_Span
Helvetica
Tahoma Bold WST_Swed
Tempus Sans ITC Consolas = Lucidia Console
Verdana and Courier New
Verdana Bold Constantia = Georga and
Verdana Bold Italic Palatino
Verdana Italic
Webdings Corbel = Verdana
Provided by:
Westminster
 XP 133
Vista 191
7 235
8 278
 10.5 Leopard 160
10.6 Snow Leopard 248
10.7 Lion 225
10.8 Mountain Lion 242
10.9 Mavericks 247
 iPhone iPad
3 44 —
4 41 67
5 57 57
6 61 61
7 71 71
1-3 3
4 6
7 25
8 37
Microsoft’s
Core Fonts
for the Web
Not included in Windows
since Windows ME in
2000

Pretty good monospace

font
 Actually Courier New

Inferior version of Courier

Still included in Windows

Still included with
Windows
Still included in Windows
Still included in Windows
 Microsoft
ClearType
Font Collection
Font Stacks
Don’t just focus on serif or sans-serif

Also look at width: wide (large x-height) & narrow

(small x-height)

Try to group fonts in your stack by x-height for unity

 Sans serif

Wide Narrow

Verdana Futura
Trebuchet MS Helvetica
Arial

Avenir
 Serif

Wide Narrow

Georgia Times New Roman

Iowan Old Style Times

Palatino Baskerville

Superclarendon Cochin
 Monospace

Wide Narrow

Courier Andale Mono

Courier New Menlo

American
Typewriter
 Text
Properties
White Space
white-space

Specifies how whitespace inside an element is handled

Is whitespace collapsed?

How are newline characters in source treated?

Is text wrapped? If so, how?

 Values Newlines Whitespace Wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
Multi-Column
Layout
 column-width
Specifies hint of the optimal width of the columns,
as actual width may be wider or narrower

column-count
» Specifies ideal number of columns for content
» If column-width is set, becomes maximum number of
columns

columns
Shorthand for column-width & column-count
column-gap
Specifies size of the gap between columns
 column-rule
Specifies a straight line (rule) to be drawn between
each column

Shorthand for
» column-rule-width (<length> data type or thin,
medium, or thick)
» column-rule-style
» column-rule-color
 column-span
Allows an element (like <h2>) to span across all
columns

Values:
» all: spans all columns
» none: does not span multiple columns (default)
Punctuation
Generated Content
 quotes
Specifies how rendering engines should render
quotation marks

Only works with…

» Elements that already generate quotation marks (q)
» Quotation marks generated with ::before & ::after
Embedded
Fonts
Formats
TTF: TrueType Fonts

Font standard released by Apple in 1991

Standard on Mac OS X & Windows

On the Web, simply link to TTF file

OTF: Open Type Fonts

Developed by Microsoft & Adobe & now an open

standard as of 2007 called Open Font Format

On the Web, simply link to OTF file

SVG: Scalable Vector Graphics

XML-based file format describing 2D vector graphics,

both static & dynamic

Open standard developed by W3C since 1999

Warning! SVG was not designed for displaying fonts, so it

does a horrible job with multi-line text

If you’re to use it for a word (like a logo), use SVG, not

SVG fonts
@font-face
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold.ttf"),
local("HelveticaNeue-Bold.ttf"),
url(“http://www.foobar.com/
MgOpenModernaBold.ttf");
}
local & url don’t
have to point
to same font!
Licensing
Licensed fonts
www.fontsquirrel.com
 CSS Typography
Fonts & Formatting

R. Scott Granneman

Jans Carton

© 2007 R. Scott Granneman

Last updated 2015-10-13
You are free to use this work, with certain restrictions.
1.11 For full licensing information, please see the last slide/page.
Changelog

2015-08-10 1.12: Added slide about justified text &

accessibility; added quote from Kanye West
Changelog

2015-10-13 1.11: Added more detail & citations to

Web Browser Defaults section; added quote about
Arial; added Comic Sans examples; changed subtitle by
adding Typefaces
2015-06-06 1.10: Added “Why” section to beginning;
switched over theme to use Georgia Pro instead of
Georgia; better formatting of Microsoft ClearType
Fonts; fixed Web Browser Defaults tables to show fonts
& look better; fixed slides that were formatted wrong &
did a lot of clean up work; removed slide in font-
family that showed order
Changelog

2015-05-27 1.9: Moved <length> data type from Data

Types presentation to here; added browser support chart
for viewport-percentage font-size; added chart info for
em & ch; added slide about typography terms with
important terms bolded; added note about overshoots on
the e in the initial diagram
2015-05-09 1.8: Added info about Google Fonts
adjusting font format depending upon browser; added
info about WOFF 2; added info about Font Deck; added
slide showing Presentations on granneman.com
Changelog

2015-04-27 1.7: Fixed some font-weight names;

added examples of font weights using Proxima Nova
2015-01-15 1.6: Rearranged Text Properties
properties; added letter-spacing & word-spacing;
minor fixes; moved a few things from Bonus back into
main presentation; added text-shadow
2014-10-23 1.5: Removed & added some fantasy
fonts; added column-rule; minor fixes
Changelog

2014-08-11 1.4: Added details on colors &

currentcolor
2014-08-03 1.3: Moved bonus stuff to Extras section
at end; fixed typos; added more detail on <color>;
difference between font- & text-; better screenshot
for columns
2014-07-30 1.2.2: Added more on Comic Sans
2014-07-27 1.2.1: Added more to color property
2014-07-23 1.2: Shortened
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.

You are free to:

» Share — copy and redistribute the material in any medium or format

» Adapt — remix, transform, and build upon the material for any purpose, even commercially

Under the following terms:

Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so
in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. Give credit to:

Scott Granneman • www.granneman.com • [email protected]

Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions under the same
license as the original.

No additional restrictions. You may not apply legal terms or technological measures that legally restrict others from doing
anything the license permits.

Questions? Email [email protected]