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.

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
13. SLAB SERIFS Light weights: feminine, deliciate, frail Heavy weights: bold, daring, attention-seeking *Serifs and line width are the same* RT
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
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