Typography in Web Design: Making Your Words Talk

11c52656470c0900f8ad097ad4082e10?s=47 JJ Springer
March 23, 2013

Typography in Web Design: Making Your Words Talk

WordCamp San Diego 2013 presentation about the importance of using typography in web design. Includes why it's important, breaks down categories of typefaces and when to use them, how to break down your site so you know what fonts to use where, and some examples of effective (and not effective) uses of typography.

11c52656470c0900f8ad097ad4082e10?s=128

JJ Springer

March 23, 2013
Tweet

Transcript

  1. TYPOGRAPHY IN WEB DESIGN: MAKING YOUR WORDS TALK Download slides

    at jjsfolio.com/wordcamp
  2. J.J. SPRINGER WEB & GRAPHIC DESIGNER WordPress, Print, Marketing, &

    Television JJSFOLIO.COM
  3. OVERVIEW 1. Purpose of design in the web 2. Catergories

    of typefaces 3. Typography terms 4. Identifying where typography can help you 5. How to combine typefaces 6. Where to find typefaces and how to use them 7 . Resources for further development
  4. DESIGN MATTERS • Confusing • No authority • Hurts the

    eyes • Where’s the info • Untrustworthy • What’s the message?
  5. DESIGN MATTERS • Boring • Not exciting • Amatuer •

    Quickly done • Easier to read, but I wonder how much you really care
  6. DESIGN MATTERS • Interesting • Easy info • Exciting •

    Authorative • Professional • Can finally focus on the cute cat!
  7. What is the purpose of a website? also for pictures

    of cool cats TO CONVEY INFORMATION!! &
  8. IT’S UP TO YOU TO FIGURE OUT HOW TO MAKE

    YOUR SITE INTERESTING
  9. A DESIGNER IS A DETECTIVE The Message Your Audience Profession

    Age Style? Needs Serious vs. fun Branding
  10. ONTO THE FUN PART! Serif with “nubbins” Dingbat pictures Sans

    Serif without “nubbins” HDWElf
  11. SERIFS Formal, Authoritative, Traditional, Respectful Old Style Transitional Modern STYLES

  12. None
  13. SLAB SERIFS Light weights: feminine, deliciate, frail Heavy weights: bold,

    daring, attention-seeking *Serifs and line width are the same* RT
  14. None
  15. SANS SERIFS Modern, Laid-Back, Impactful EASY TO READ! - Good

    for older audiences, non-native speakers, people with learning disabilities, and great at small sizes IMAGE COPYRIGHTED ADOBE TYPEKIT
  16. SANS SERIFS Unlike print, sans serifs are GREAT for body

    copy since it’s easier to read on a computer screen and serif fonts
  17. None
  18. DINGBATS Social Media, Icons, Bullet Points, Accents PesACOFHDWElfk sg v

    d ew'lLKoi8- ejd;LKJ or download Automattic’s version, Genericons
  19. FONTS TO NOT USE! Blackletter - Hard to Read Pixelated

    Fonts - Also Hard to Read Novelity Fonts - No one takes me seriously Cursive Fonts - Doesn’t render well
  20. TYPOGRAPHY TERMS Typeface or Font Family - set of fonts

    that share design Futura Book Futura Heavy Futura Bold (not <b>) Futura Medium Oblique (not <i>) Futura Bold Condensed • Don’t use font-weight or font-style when you can use the font Size - measurement of size in web (font-size) • px, pt, em, small/medium/large Typeface vs Font Futura is the typeface Futura Book is the font
  21. LOVE CATS KERNING TRACKING (letter-spacing) LEADING (line-height) (only plugins will

    do this)
  22. WHAT TO USE AND WHERE 1. Catergorize • Too many

    menu items • All on homepage • Confusing I don’t know where to look to find what I want
  23. WHAT TO USE AND WHERE 2. Prioritize • Things are

    grouped, but not clear • What do you want to show first? Easy to read, hard to find what I’m looking for
  24. CREATE HIERARCHY You need to know what you need to

    assign values to, so break down your info h1 - Site Title h2 - Page Headline h3 - Tagline h4 - Section Headline
  25. VISUAL WEIGHT The more important the information, the more visual

    weight. Where does my eye go? bold, ALL CAPS, Size, HighContrast, Color
  26. BODY COPY Body copy is the majority of your information

    “Copy” is a term for the written content of a web or print piece Headlines are interesting & bold Body copy is helpful & boring
  27. COMBINING FONTS Create contrast while maintaining one key element between

    different fonts Soft Kitty Song By Sheldon Cooper Soft kitty, warm kitty, little ball of fur. Happy kitty, sleepy kitty, purr, purr, purr. Soft Kitty Song By Sheldon Cooper Soft kitty, warm kitty, little ball of fur. Happy kitty, sleepy kitty, purr, purr, purr. Soft Kitty Song By Sheldon Cooper Soft kitty, warm kitty, little ball of fur. Happy kitty, sleepy kitty, purr, purr, purr. Soft Kitty Song By Sheldon Cooper Soft kitty, warm kitty, little ball of fur. Happy kitty, sleepy kitty, purr, purr, purr. Soft Kitty Song By Sheldon Cooper Soft kitty, warm kitty, little ball of fur. Happy kitty, sleepy kitty, purr, purr, purr. Soft Kitty Song By Sheldon Cooper Soft kitty, warm kitty, little ball of fur. Happy kitty, sleepy kitty, purr, purr, purr.
  28. COMBINING FONTS Common elements to choose: x-height stroke width same

    designer glyph width proportion time period The internet is full of great font combinations people have already put together, just search. a t p e f CAP HEIGHT BASELINE MEANLINE
  29. WHERE TO FIND TYPFACES Free Google Web Fonts Fastest loading,

    WP plugins, largest selection, boring fonts FontSquirrel Interesting fonts, loads slower, has dingbats, best handwritten fonts
  30. GOOGLE WEB FONTS Download the fonts for Photoshop Click to

    review the typeface upclose Click to continue Type a statement you want to preview Select options you want
  31. Click which fonts you want to download from the selected

    typeface Google will warn you how long your fonts will take to load Google will give you the code to add and how to use it in your CSS
  32. WHERE TO FIND TYPFACES Paid Fontdeck Typefront Fonts.com Typekit by

    Adobe Fontslive Typotheque Fontspring Webtype Kernest WebINK MyFonts
  33. DEVELOP YOUR PALETTE Pinterest Smashing Magazine

  34. • Minimal design • Fonts are clean and modern •

    Grid layout • Only uses sans serif • Mood is sleek and forward thinking • Very techie without being “in your face”
  35. • Obvious immediately what their company does and contact information

    is in bright red letters across the screen
  36. • Interesting font for main headline • Subheaders are similar

    in style to main headline but are simplier • Only uses sans serifs • Easy to read • Fun vibe
  37. • All sans serif fonts • Everything center • Headlines

    are in all caps • Font choice reflects traditional Japanese design without being a “novelity font”
  38. • Minimal font use, pictures are front and center •

    So little copy, it’s easy to find • Oblique serif headline with sans serif copy
  39. • Don’t even know the language and it’s easy to

    see where your eye goes • Slab serifs headers with sans serif body copy • Simple color scheme • Fun but authoritative
  40. ADDITIONAL INFO I’ll be outside for questions Thanks everyone! Now

    go and make the web beautiful! Download slides at jjsfolio.com/wordcamp