Typography first WordCamp Norway 2015
•
5 likes•1,563 views
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.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Typography first WordCamp Norway 2015
- 1. User experience WordCamp Norway 2015 by Kristin Kokkersvold, Studio Netting Typography first
- 2. The web is 95% typography Oliver Reichenstein, 2006 h"ps://ia.net/know-‐how/the-‐web-‐is-‐all-‐about-‐typography-‐period
- 3. Then and now 2006 2015
- 4. WordCamp The anatomy of letters
- 6. Identity
- 7. Different types Serif Sans-serif Slab-serif Script Display Monospace
- 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
- 10. § Norwegian law W C A G 2 . 0 A A h"p://uu.difi.no/english/
- 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/
- 16. Thanks! Twitter: @kekkakokkers Epost: kristin@studionetting.no Mobil: 911 07 367 Remember, good typography can´t save bad content!