Crash Course
in Web Typography
by Wyatt Greene
About Me
- 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.
About This Talk
- whirlwind overview of web typography
- participation welcome
- slides with notes available afterwards on techiferous.com
Contents
- History
- Terminology
- Tour of Typefaces
- Working with Web Typography
History
| A | G | K | M | O | Q | R |
|
|
|
|
|
|
|
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.
Uncials
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.
Learn more
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.
Carolingian Minuscule
Carolingian minuscule
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.
Blackletter
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.
Learn more
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 Bible
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.
Humanist Minuscule
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.
Learn more
They considered blackletter barbaric and as such, called it "Gothic".
Humanist Typefaces
Therefore, when printing presses arrived in Italy, the first typefaces mimicked
the local handwriting. These early typefaces are called humanist or venetian.
Old Style
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.
Transitional
You can see even more contrast between thick and thin strokes in transitional
typefaces, which became popular in the 1700s.
Modern
Modern typefaces first appeared in the late 1700s.
In modern typefaces, contrast between thick and thin strokes became extreme.
Serifs are thin and unbracketed.
image source
Slab Serif
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.
image source
Sans Serif
Sans serif fonts started to be used in the 1800s. This poster is from
the 1890s.
Bauhaus & Swiss Modern
The geometric and minimalist ideal can be seen in
Bauhaus and Swiss typography, which became popular in the 20th century.
image source
Digital
A new medium, the pixel-based screen, required new typefaces to be developed.
What's the Point?
- typography changes with changing circumstances
Terminology
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
technology
Notice the baseline, x-height, ascenders, descenders and counters.
Anatomy of Letterforms
technology
Anatomy of Letterforms
nice glossary of the anatomy of type
Other Useful Terms
- kerning
- tracking
- leading
- measure
- typographic color
Tour of Typefaces
Favorite Fonts?
Archer
and
Gotham
were mentioned when I gave this presentation, as were
Cooper Black
and
Carsonified
.
Print Typefaces
Bodoni
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.
Caslon
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.
Frutiger
This typeface was designed by Adrian Frutiger in 1968 for the Charles de Gaulle
airport. It is clean and legible.
image source
Futura
Futura was designed in 1927. You can see the Bauhaus geometric influence.
Garamond
Garamond was invented in 1530. So you should not be using it on your web sites.
Gill Sans
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
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.
image source
Times Roman
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
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.)
Screen Typefaces
Arial
- 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
- created for Microsoft BOB
- a Microsoft core font for the web
- designers love to kick it
Comic Sans was modeled after the letters in The Dark Knight Returns comic book.
Droid
- designed for mobile devices
- Apache license
- used heavily in this presentation
Georgia
- designed by Matthew Carter in 1993
- named after aliens
- my first choice for a serif body screen font
League Gothic
- somewhat popular as headline font on web sites
- open-source
- works best in ALL CAPS
(Someone noted that League Gothic is a bit overused or getting stale.)
Museo
(Someone noted that Museo also might be overused or stale.)
Verdana
- 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
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 multiple people
Obtaining Fonts: Sources
- FontSquirrel (free)
- Google Font Directory (free)
- The League of Moveable Type (free)
- FontSpring (some free)
- Typekit (subscription)
- Others?
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 hinting 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.
Organizing Fonts
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.)
Embedding Fonts
(This is where the presentation ended because I ran out of time.)
Embedding Fonts: 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.
Embedding Fonts:
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
- licensing
- 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
- FontSquirrel
Here is where I gave a demo of how to embed fonts.
Testing Fonts
Testing Fonts: Samples
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.
Choosing Fonts
Choosing Fonts:
Medium Matters
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.
Geronimo 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.
Choosing Fonts:
Display vs. Body
- choose display typefaces for personality
- choose body typefaces for readability
Choosing Fonts:
Personality
The personality of a font is subjective and cultural, but you can still tease it out with science 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: study
- 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