in Web Typography
by Wyatt Greene
- Ruby on Rails developer since 2006
- interested in web design
I don't have any professional design training. I've recently done my
own research into web typography, but it hasn't been filtered through
the lens of experience. So take what I say with a grain of salt.
- whirlwind overview of web typography
- participation welcome
- slides with notes available afterwards on techiferous.com
- Tour of Typefaces
- Working with Web Typography
The first letters
came from pictures. A is an ox; G, a throwing stick; K, the palm of
a hand; M, water; O, an eye; Q, a monkey; and R, a head.
Romans wrote on papyri, often in cursive. When people started writing more on
parchment and vellum, over time the writing developed into what we call
uncial script. Uncial has a more rounded appearance because the pen can glide more
smoothly on parchment and vellum as opposed to papyrus. Uncial script was in
use from the 3rd to 8th centuries AD.
Uncial script started with no ascenders and descenders, but around 600
AD ascenders and descenders started appearing. The Book of Kells is an
example of later uncial script that has ascenders and descenders.
was created during Charlemagne's reign to provide a standard, legible
script for use across the empire. It was used from the 9th to 12th centuries.
Demand for books increased as more people became literate and new universities were
founded. Carolingian minuscule evolved into blackletter because blackletter is
quicker to write and takes up less space.
Blackletter was used from the 12th century to the 17th century, but in Germany
it survived into the 20th century. This 1922 banknote is a good example of blackletter.
This banknote is also known as the "vampire" banknote, because if you turn your
head to the right and use your imagination, you can see the head of a vampire
biting the neck of the person.
Gutenberg developed the printing press in the 1440s. Note that I didn't say "invent",
because printing with movable type was invented earlier in east Asia.
Notice that the first font used was a form of blackletter, which was inevitable
since that's what people wrote in.
Not everyone was writing in blackletter in the 1400s, however. In Italy,
the Renaissance looked back to reviving classical wisdom. As such, they
mimicked the Carolingian minuscule, which they mistook for the writing
of the ancient Romans.
They considered blackletter barbaric and as such, called it "Gothic".
Therefore, when printing presses arrived in Italy, the first typefaces mimicked
the local handwriting. These early typefaces are called humanist or venetian.
As punchcutters' skills increased, typefaces became more refined and it
was possible to vary the stroke width more. Old style typefaces were used
in the 1500s and 1600s.
You can see even more contrast between thick and thin strokes in transitional
typefaces, which became popular in the 1700s.
Modern typefaces first appeared in the late 1700s.
In modern typefaces, contrast between thick and thin strokes became extreme.
Serifs are thin and unbracketed.
Slab serif fonts were introduced in the early 1800s. They were also called
"Egyptian" because people were fascinated with all things Egyptian at the time.
Slab serif fonts have thick, unbracketed serifs. Just about every typewriter
uses a slab serif typeface.
Sans serif fonts started to be used in the 1800s. This poster is from
Bauhaus & Swiss Modern
The geometric and minimalist ideal can be seen in
Bauhaus and Swiss typography, which became popular in the 20th century.
A new medium, the pixel-based screen, required new typefaces to be developed.
What's the Point?
- typography changes with changing circumstances
Typefaces vs. Fonts
A typeface is a group of fonts having the same design.
Font family is another term for typeface. The typeface would be "Helvetica" but
the font would be more specific, like "Helvetica Bold" or "Helvetica Light Oblique".
Weight is a term used for the thickness or boldness of the letterforms.
Anatomy of Letterforms
Notice the baseline, x-height, ascenders, descenders and counters.
Anatomy of Letterforms
Other Useful Terms
- typographic color
This font was designed in 1798 by Giambattista Bodoni.
Picket Fence or Dazzle
The regular rhythm of Bodoni combines with its bold vertical strokes to create
a "picket fence" or "dazzle" effect that threatens readability. The above
typeface is not Bodoni but it illustrates the picket fence problem well.
William Caslon I created several typefaces in the early 1700s that bear his name.
Caslon is a very trustworthy typeface. The Declaration of Indepedence is in Caslon.
This typeface was designed by Adrian Frutiger in 1968 for the Charles de Gaulle
airport. It is clean and legible.
Futura was designed in 1927. You can see the Bauhaus geometric influence.
Eric Gill designed Gill Sans in 1931. It's designed to be used for both display and
body text. (When I gave this presentation, someone mentioned that Gill Sans looks good
in all caps with lots of tracking.)
Helvetica was designed in 1959 in Switzerland.
It is the most widely used typeface in the world.
If there is any font you should learn about, it is this one.
It's a great default display font, being both neutral and beautiful.
In 2007, an entire movie was made about this typeface.
This typeface was designed in 1933 for the Times newspaper in London. It was
designed for both headline and body copy. Its main goals were legibility and
economy of space.
Univers was designed in 1954 by Adrian Frutiger. It is very similar to Helvetica.
(I mentioned that I didn't like the Univers G and Andrew noted that Univers
looks better condensed.)
- Helvetica alternative
- wide adoption
- How can you tell it apart from Helvetica?
Arial was designed by Microsoft as a core font for the web
(There was considerable discussion about why Arial looked so bland. Was it simply
because it was a default font for so long?)
Comic Sans was modeled after the letters in The Dark Knight Returns comic book.
- designed for mobile devices
- Apache license
- used heavily in this presentation
- designed by Matthew Carter in 1993
- named after aliens
- my first choice for a serif body screen font
- somewhat popular as headline font on web sites
- works best in ALL CAPS
(Someone noted that League Gothic is a bit overused or getting stale.)
(Someone noted that Museo also might be overused or stale.)
- designed by Matthew Carter
- a Microsoft core font for the web
- loose tracking and large counters increase readability
- great choice for sans-serif body text
(This font was definitely not favored by the group.)
Working with Web Typography
Obtaining Fonts: Licenses
- fonts come with a license
- some are open source, some not
- keep track of your licenses, especially if you are in an organization with
Obtaining Fonts: Sources
Some of these sites offer fonts that are embeddable using @font-face.
Google serves up the font files from their own server.
Typekit is subscription-based and also loads the font files from their own server.
Obtaining Fonts: Quality
- cheap fonts may have no
or no manual hinting
cheap fonts may not pay attention to kerning or ligatures
Notice the difference in kerning between Helvetica and
SG Grotesk No. 9.
I use FontBook on my Mac to organize my fonts. (When I gave this presentation,
some designers noted that they used some other professional software to organize
their fonts, and they tended to have a lot of fonts.)
(This is where the presentation ended because I ran out of time.)
Embedding Fonts: Web-Safe Fonts
a nice list of web-safe fonts
In olden times, you couldn't embed fonts in your web page; you had to rely
on fonts the user already had installed on their system.
a nice list of font stacks
This lead to the use of "font stacks", which are a list of fallback fonts in case the
user did not have the preferred font on their system.
Embedding Fonts: @font-face
- could link to fonts in CSS since 1998
- font format support held us back
- CSS syntax
Embedding fonts in your web site causes them to be downloaded by visitors to your web
site, so you should only use fonts that have a @font-face friendly license.
Embedding Fonts: Demo
Here is where I gave a demo of how to embed fonts.
Testing Fonts: Font Pairs
I have my own
sample web page
that I use to try out various font pairs.
Testing Fonts: Browsers
I use Droid Serif on my blog and when I tested it with IE8 on XP, I noticed that the
bottoms of lowercase t's had a little "ink blot" on them. The font rendered well
on other browsers on my Mac, however.
Choose fonts designed for the screen and you will get better results.
If you are targeting mobile apps, there are fonts made specifically for mobile devices.
is a good
example of what you get if you use a print font for the screen.
Especially notice what happens to the spur on the capital J.
Display vs. Body
- choose display typefaces for personality
- choose body typefaces for readability
The personality of a font is subjective and cultural, but you can still
if you really want.
Choosing Fonts: Readability vs. Legibility
- readability is how easy it is to read a typeface
- legibility is how easy it is to distinguish individual letters
example of poor legibility
Choosing Fonts: Readability
- lowercase is read about 5%-10% faster than uppercase
word shape does not matter as much as letter shape:
- conclusion: don't evaluate fonts based on how they affect word shape
Tips for Body Text
- choose a font designed for the screen
- bump up the size if it's a serif font
- do not choose based on personality; font should be invisible
Tips for Body Text
- be conservative -- avoid condensed, bold, or other variations from normal proportions
- avoid italics
Since italics are slanted, the edges of letters appear jagged because pixels are boxy.
Generally speaking, use italics sparingly on the screen.
Tips for Body Text
- ideal measure is 8-10 words per line
- leading should be larger than word spacing
- longer lines need more leading
- when adjusting the tracking, adjust word spacing, too
Choosing Fonts: Font Pairs
- header and body fonts should be different enough
- header and body fonts should be harmonious
- using a serif and sans serif of the same typeface usually works well