Introduction to typography

Photo: bettinche, flickr.com/photos/bettinche/3640142736, by-sa

Three topics of the day
Readability Expression Technology
1 Readability
Readability != looking like a book
Line height
White space
Line length
Contrast
Fonts, sizes,
alignment
Language,
text amount
Paragraph
size
Fonts
Some fonts are more readable than others.
Sp fs r s r .
So are display fonts.
Or fonts bolded and italicized and underlined and...
Or using very many different fonts at once.
Online, thin weights with strong differences render badly.
Serif fonts with strong, even lines and good x-heights are
most readable for long texts online like Georgia.
Alignment
Centered alignment forces the eye to jump from starting
line to starting line.
The same is true for text aligned to the right: It forces the
eye to find the beginning each new line.
With long words, justified text can generate gaps
sometimes between words or even characters if
hyphenation is not used, like here.
Online, you therefore mostly fare best with left-aligned
paragraphs.
Large eye-text distance = large fonts
Our eyes are usually further away from desktop screens
than books. Hence, web fonts must be bigger.
Font size
Print fonts are measured in pt (points). 1 pt = 1/72 inch.
10-11pt is a legible standard size for long-form text.
Digital fonts are measured in px, em/rem or %.
Px (pixel) are an absolute measure.
16px ! 12pt (depending on screen resolution)
em/rem (01.0) and % (1100) are relative measures.
They size characters relative to the default body font size
16px in most browsers if not otherwise specified.
12pt ! 16px ! 1em ! 100% is a good size for screens.
Line height
100% = 1 line is too narrow. Go for 150% = 1,5 lines.
Line width
5060 characters per line is a good yard stick.
Visual hierarchy
Guide the eye with type, color, weight, size, etc.
Make all visual distinctions
as subtle as possible, but
still clear and effective.
Edward Tufte, Visual Explanations
Smallest effective difference
Chunking
Remember the law of proximity.
Unclear chunking
Which author belongs to which comment? Hard to tell.
Clear chunking
The space between the comments establishes units.
Contrast
Avoid low contrasts, jarring color contrasts, and hard
black/white. Toned black/white or same color reads best.
Black on
white
White on
black
Color on
black
Black on
color
White on
color
Color on
white
Color on
color
Grey on
white
Dark grey on light Same color on color
Contrast
When using color on color, check brightness levels and
font weight for good readability.
Remember color blindness
Ca. 7.5% of males have some color blindness. Esp. with
red and green, make sure to use different brightness
levels. Use colorfilter.wickline.org to check your design.
Capitalization
WRITING LONG PORTIONS OF TEXT IN ALL-CAPS HAS
NOT ONLY BEEN SHOWN TO BE VERY HARD TO READ,
IT ALSO FEELS AS IF YOU ARE SCREAMING AT YOUR
READER, LIKE SO. EVEN HEADLINES ARE HARDER TO
READ IN ALL-CAPS.
Writing for the Web
n
n
g
r
o
u
p
.
c
o
m
/
a
r
t
i
c
l
e
s
/
h
o
w
-
u
s
e
r
s
-
r
e
a
d
-
o
n
-
t
h
e
-
w
e
b
/
Cut half the words. Then cut again
Hello and welcome to our web home we
appreciate your interest in our services. As
you might have noticed, we have
implemented a series of changes on this
web presence in the past month. In order to
accommodate your personal preferences, we
would like to ask you a series of questions
regarding our new design. Completing the
questionnaire should take no longer than
two to three minutes.
On the following page, you will find a series
of questions with multiple-choice menus.
Please select the answer that comes closest
to your opinion.
Tell us how to make this site better. It only
takes 2 minutes.
Talk like a person
designingsocialinterfaces.com/patterns/Talk_Like_a_Person
2 Expression
Type expresses values, moods, qualities
Imagine Apple with a different font
http://idsgn.org/posts/apple-switches-to-verdana/
Apple Inc.
Or the Obama campaign
http://idsgn.org/posts/apple-switches-to-verdana/
CHANGE
WE CAN BELIEVE IN
CHANGE
WE CAN BELIEVE IN
Playful, informal, approachable, ...
Vintage, Western, nostalgic, ...
Fresh, light, organic, ...
Edgy, vibrant, bold, playful, ...
Bold, classic, organized, ...
Type is like your clothes dressing you
Callbrl says: l don'L care how l look and go wlLh Lhe defaulL
crumpled shlrL and [eans.
The same goes for Times New Roman: a bland business suit.
What does Arial rounded say about you?
Who wears Helvetica Neue Light?
Do you know a Franklin Gothic kind of guy?
And Comic Sans, well ...
Choosing typefaces
Use readable fonts for long text, e.g. classic serif typefaces
Identify the mood, personality you aim for as adjectives
Try not to use the trite and obvious
Combining typefaces
Less is more: Work with fonts and sizes of 1-2 typefaces
Assign clear roles in your visual hierarchy
Contrast: Serif and sans-serif, heavy and light weight,
classic and extravagant, ...
One can be plenty
These pages use different fonts of one typeface
3 Technology
Remember?
Characters have to be rendered for display, just like images.
Remember?
Just like images, type can be represented as bitmap or vector
(though bitmap is only used in system consoles these days).
BITMAP (RASTER) OUTLINE (VECTOR)
Curves != pixels
Outline font files describe characters as smooth Bezier curves
that have to be rendered as sharp pixels on a screen.
Anti-Aliasing
Renderers use anti-aliasing (grey-value pixels) to create the
impression of smooth curves.
Hinting
Good font files embed hints: instructions how to optimally
generate anti-aliased pixels at various display sizes.
Hinting
GEORGIA TT WITHOUT HINTING GEORGIA TT WITH HINTING
Mind the rendering
Different OSs and softwares render type differently.
For good results, always cross-check.
LETTER A RENDERED BY THREE OS/BROWSER MIXES AT 16 PX
Mind the rendering
You can check with typekit.com, for instance.
Rendering on Mac and Windows
Mac Quartz anti-aliases for print-like impression.
Windows ClearType goes for readable sharp pixels.
How fonts are rendered
01100001
= U+0061
You press a key
Bembo.ttf
that generates bits
which decoded in the unicode
lookup table identify a character
asking the font file for
the shape of that character
then rendered on-screen
Font files come in three common formats
PostScript.ps Oldest format, by Adobe all others are
based on this
TrueType.ttf Developed by Apple as a contender, now
very common
OpenType.otf Youngest format, now open standard,
combines features of both
Fonts draw on unicode character tables
Unicode: universal character lookup tables for characters
of all written languages
Identifies characters with U plus 4-5 hexadecimal digits.
U+0070A = z in Latin script
Computers encode unicode in various forms: UTF-8 (most
common) encodes it in one to four 8-bit blocks
Font files include different characters
Organized in unicode script blocks. More supported
blocks = larger files, more languages displayable
Main software that renders type
Operating systems store and manage font files centrally,
come with different system fonts pre-installed
Graphics editing software (InDesign, Photoshop,
QuarkXPress) typically render type well and support
advanced features
Word processors often render type poorly, no support for
kerning, ligatures, etc. (e.g. MS Word before Word 2010)
If a document or image specifies a font not installed on
your computer, software will default back to a (hopefully)
similar installed system font
Portable Document Format (PDF)
Designed to represent documents independent of
hardware, OS, software
Describe images, fonts in PostScript vectors (= smooth
scaling), can embed bitmaps
Come with embedded fonts and can embed further fonts:
PDF reader/printer software can render the font even if it
is not installed on your device
Typography on the web
Web browsers until ca. 2008
Different browsers use different type renderers
HTML/CSS can specify which font to use and fall back to if
not installed on your computer
If installed on your machine, use this font.
If not, fall back on this.
And if that fails, use your default serif font.
Result: 18 Websafe Fonts
To ensure same types displayed on all computers, people
used system font files pre-installed across OSs
Take the font file from here.
Today: @font-face
Standard supported in CSS3 and modern browsers allows
the referencing of uploaded font files
Issues with @font-face
Different browsers support different font file formats
Uploaded font files can be downloaded: Copyright
infringement!
Free solution: Reference/upload multiple font files, use
only open source font files
$ solution: Use type hosting services that pre-package
font files and host/stream them in encrypted form
Fontsquirrel.com
Cross-browser open source font packages
Typekit.com
Commercially hosted font packages
Losttype.com
Some good pay-what-you want fonts
Theleagueofmoveabletype.com
Some excellent open source fonts
4 Exercize
In-Class Exercize
Goal: Critique the flyer
1. Form your collaborati ve notes groups.
2. Find the section of guidelines associated wi th your group on
the cheat sheet.
3. As a group, identify issues wi th the flyer, and discuss how you
would fix them.
4. As a group, present your findings to the class
Homework
Goal: Redesign the flyer
1. Pick one or t wo of the following adjecti ves:
somber, pristine, cheerful, distinguished, majestic, classic, baroque, minimalist, psychedelic,
country-style, official, medieval, manga, gothic, exuberant, calm, cyberpunk, warm, caring
2. In a program of your choice, redesign the flyer so that i t
(a) is highly readable, wi th a good visual hierarchy following the principles discussed;
(b) expresses the adjecti ve(s) you chose
(c) uses only typography no images or textures!
(d) conveys all the information on the flyer but you can rewri te/shorten if you want
3. Upload a PDF or PNG of your design to the dropbox.
4. Prepare to present and explain your design in class.
Backup: Terminology
Serif type faces have serifs (little feet), sans-serifs dont.
Serifs bind letters together, which eases reading in long texts.
Serifs vs. Sans-serifs
Display types are big, eye-catching good for public display.
Text type faces are good for long-form reading.
Display vs. Text
DISPLAY TEXT
Fonts are specifically sized and designed subsets of a typeface,
e.g. 24pt Gill Sans bold. Here are multiple fonts of 1 typeface.
Typeface versus font
The typographic scale
As in music, proportional differences create harmony.
Character differentiation
Types are better or worse in differentiating characters
important when dealing with passwords or numbers!
Monaco iIl10O
Helvetica neue iIl10O