typography first wordcamp norway 2015

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: kristin@studionetting.no

Mobil: 911 07 367

Remember, good typography can´t save bad content!