Embed Size (px)
Citation preview
User exper ience
WordCamp Norway 2015 by Kristin Kokkersvold, Studio Netting
Typography first
The web is 95% typography Oliver Reichenstein, 2006
h"ps://ia.net/know-‐how/the-‐web-‐is-‐all-‐about-‐typography-‐period
Then and now
2006 2015
WordCamp
The anatomy of letters
Typography first
Identity
Different types
Serif Sans-serif
Slab-serif Script
Display Monospace
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?
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
§ Norwegian law
W C A G 2 . 0 A A
h"p://uu.difi.no/english/
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
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/
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
Beyond the basics
• Baseline grid • Kerning • Advanced features:
• Text indents in paragraphs • Drop caps • Emphasize first
• Ligatures
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/
Thanks!
Twitter: @kekkakokkers Epost: [email protected]
Mobil: 911 07 367
Remember, good typography can´t save bad content!
