Content is still king, and some claim that 95% of the web is text. How do you present your texts? I want to give an introduction to the anatomy of letters and hierarchy of text, how to choose the right font and practical tips for good readability and accessibility.
8. Choosing typeface(s)
• Existing visual identity with typefaces?
Substitues?
• What are the brands key values?
• Style keywords
• What type of content?
• What is the typeface designed for?
9. Good practice
• Stick to one or two typefaces
• Contrast
• Combination of a sans-serif and serif
• Use different weights from the same
family
• Don´t use Comic Sans, Curlz or Papyrus
11. Method for choosing
Readability Flexibility Screen The little
extra
x-height
width
Descenders
ascenders
Spacing 1 l I
0 O o
Big
family
Sizes,
weights
A X X X X X X
B X X
C X X X X X
12. Designing your content
• Font size
• Paragraph width
• Hierarchy
• Whitespace
• Line height
Move
on
to
other
typographic
elements
like
links,
blockquotes,
lists,
opening
paragraphs,
image
cap@ons,
tables,
bylines,
labels…
http://studionetting.no/wordcamp/
13. Starting tips
• Start with:
• <p>1em and line-height 150%
• <h1> 3em and line-height 110%
• Line width
• Smaller screen sizes
• Group your content
• For inverted text, increase line height
• Avoid faux bold and faux italic
14. Beyond the basics
• Baseline grid
• Kerning
• Advanced features:
• Text indents in paragraphs
• Drop caps
• Emphasize first
• Ligatures
15. Resources
• Typecast.com
• Type on screen and Thinking with type by Ellen Lupton
• Your browser-developer tool
• Google Fonts, Typekit and MyFonts
• Golden Ratio Calculator http://www.pearsonified.com/typography/