HINTS &                SCALES               The Science & Art of               Designing With Web TypeSunday, January 27, 13
I N T RO D U C T I O N S               Ira F. Cummings               Brand Strategist and Designer               email: ir...
THE BASIC OUTLINESunday, January 27, 13
THE BASIC OUTLINE               The Importance of Web TypeSunday, January 27, 13
THE BASIC OUTLINE               The Importance of Web Type               Type FundamentalsSunday, January 27, 13
THE BASIC OUTLINE               The Importance of Web Type               Type Fundamentals               Technical Impleme...
THE BASIC OUTLINE               The Importance of Web Type               Type Fundamentals               Technical Impleme...
THE BASIC OUTLINE               The Importance of Web Type               Type Fundamentals               Technical Impleme...
THE BASIC OUTLINE               The Importance of Web Type               Type Fundamentals               Technical Impleme...
Our Definition of Web Type               Non-system fonts,               hosted remotely, that are               displayed...
What’s                the Point?Sunday, January 27, 13
THE PURPOSE OF WEB TYPESunday, January 27, 13
THE PURPOSE OF WEB TYPE               BrandingSunday, January 27, 13
THE PURPOSE OF WEB TYPE               Branding               DifferentiationSunday, January 27, 13
THE PURPOSE OF WEB TYPE               Branding               Differentiation               For Your Readers’ SakeSunday, J...
Type                FundamentalsSunday, January 27, 13
Character Terminology               BASIC CHARACTER ANATOMYSunday, January 27, 13
C H A R A C T E R A N AT O M Y               The parts of a character               define its personality.               ...
The basic anatomy of charactersSunday, January 27, 13
Paragraph Terminology               BASIC PARAGRAPH ANATOMYSunday, January 27, 13
P A R A G R A P H A N AT O M Y: M E A S U R E               Measure               Very simply, it is the length of a line ...
The measure needs to be just rightSunday, January 27, 13
P A R A G R A P H A N AT O M Y: L E A D I N G               Leading and line height set the spacing               between ...
The difference between leading a line heightSunday, January 27, 13
Leading in practiceSunday, January 27, 13
Exceptions to the leading rulesSunday, January 27, 13
Making Type Beautiful               MORE THAN READABLESunday, January 27, 13
M A K I N G T Y P E B E AU T I F U L               There are three main components               of beautiful typography:S...
M A K I N G T Y P E B E AU T I F U L               There are three main components               of beautiful typography: ...
M A K I N G T Y P E B E AU T I F U L               There are three main components               of beautiful typography: ...
M A K I N G T Y P E B E AU T I F U L               There are three main components               of beautiful typography: ...
M A K I N G T Y P E B E AU T I F U L : C O N T R A S T               Chose typefaces that are different from              ...
Typeface pairing examplesSunday, January 27, 13
M A K I N G T Y P E B E AU T I F U L : R H Y T H M               Our eyes recognize—and look for—               visual pat...
Type with no rhythmSunday, January 27, 13
20px Baseline GridSunday, January 27, 13
20px baseline gridSunday, January 27, 13
M A K I N G T Y P E B E AU T I F U L : R H Y T H M               Modular scale               Another way to create rhythm ...
M A K I N G T Y P E B E AU T I F U L : R H Y T H M               Modular scale: an example                            406....
406.4                                         247 .1                                         251.1                        ...
M A K I N G T Y P E B E AU T I F U L : R H Y T H M               It’s easy to build your own scale:               Use modu...
M A K I N G T Y P E B E AU T I F U L : S P A C I N G               The (negative) space around type is               just ...
Spacing on theverge.comSunday, January 27, 13
Technical                ImplementationSunday, January 27, 13
Implementation               THIRD-PARTY SERVICES               SELF-HOSTED FONT FILESSunday, January 27, 13
I M P L E M E N TAT I O N : 3 R D - P A RT Y S E RV I C E S               3rd-party services provide a license for        ...
I M P L E M E N TAT I O N : U S I N G @ F O N T- F A C E               Serving font files from your own server            ...
I M P L E M E N TAT I O N : U S I N G @ F O N T- F A C E               In your stylesheet:               @font-face {     ...
Browser Support               NERVOUS?Sunday, January 27, 13
B ROW S E R S U P P O RT               It’s pretty good actually (phew)               If you serve the right font file, @fo...
I M P L E M E N TAT I O N : U S I N G @ F O N T- F A C E               A note about formats:               EOT (Embedded O...
Anticipating                Problems                & Finding SolutionsSunday, January 27, 13
Technical Issues               DOWNLOAD SIZES               SERVER REQUESTS               TYPE UNITSSunday, January 27, 13
T E C H N I C A L I S S U E S : D OW N L O A D S I Z E S&               Keeping download file size small will             ...
TECHNICAL ISSUES: HTTP REQUESTS               With each server request there is the               potential for more issue...
TECHNICAL ISSUES: TYPE UNITS               With CSS, there are a variety of ways               to define the size of type ...
Aesthetic Issues               RESPONSIVE DESIGN               SCREEN RENDERING               FREE FONTS               FON...
AESTHETIC ISSUES: RESPONSIVE DESIGN               As the layout changes with context, your               type needs to cha...
AESTHETIC ISSUES: TYPE RENDERING ON SCREEN               Type rendering can vary widely.               Results will be diff...
Type rendering from vector to bitmapSunday, January 27, 13
A word of caution: beware the               free web fonts.Sunday, January 27, 13
Dangerous waters ahead…Sunday, January 27, 13
A E S T H E T I C I S S U E S : F O N T S TA C K S               Even though you’re serving font files, you               ...
A E S T H E T I C I S S U E S : M A K I N G I T A L L WO R K               There is really one thing that you can do      ...
A E S T H E T I C I S S U E S : M A K I N G I T A L L WO R K               There is really one thing that you can do      ...
The Future of                Type on the WebSunday, January 27, 13
Symbol               & Icon Fonts               RESOLUTION-INDEPENDENT GRAPHICS FTWSunday, January 27, 13
SYMBOL & ICON FONTS               Save bandwidth and gain               resolution independence.               Currently, ...
The Foundation Icon Font…fontSunday, January 27, 13
Ligatures               TWO USES FOR JOINING CHARACTERSSunday, January 27, 13
L I G AT U R E S               Ligature support is on the horizon, but               relies on support from both browser  ...
Why ligatures are importantSunday, January 27, 13
T H E L I T T L E S T U F F : L I G AT U R E S               Beyond more pleasing character               combinations, li...
FF ChartwellSunday, January 27, 13
Symbolset typefacesSunday, January 27, 13
ResourcesSunday, January 27, 13
R E S O U RC E S : M O D E R N I Z R               Modernizr to detect @font-face supportSunday, January 27, 13
R E S O U RC E S : F O N T S Q U I R R E L @ F O N T- F A C E G E N E R AT O R               Creates @font-face packagesSu...
R E S O U RC E S : F O N T F O N T S U B S E T T E R               Strip fonts of non-essential charactersSunday, January ...
R E S O U RC E S : R E S P O N S I V E T Y P E               FitText expands or shrinks type               based on contex...
Set web type in context, in real timeSunday, January 27, 13
R E S O U RC E S : L I N K S               Slides and additional links               available at:               http://ir...
THANKS                Any questions?Sunday, January 27, 13
CREDITS               This presentation set in Univers and               Hoefler Text, designed by Adrian Frutiger         ...
Upcoming SlideShare
Loading in...5
×

Hints & Scales: The Art and Science of Web Type

473

Published on

An introduction into the theory and technical details of web type.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
473
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hints & Scales: The Art and Science of Web Type

  1. 1. HINTS & SCALES The Science & Art of Designing With Web TypeSunday, January 27, 13
  2. 2. I N T RO D U C T I O N S Ira F. Cummings Brand Strategist and Designer email: ira@iracummings.com url: iracummings.com twitter: @irafcummingsSunday, January 27, 13
  3. 3. THE BASIC OUTLINESunday, January 27, 13
  4. 4. THE BASIC OUTLINE The Importance of Web TypeSunday, January 27, 13
  5. 5. THE BASIC OUTLINE The Importance of Web Type Type FundamentalsSunday, January 27, 13
  6. 6. THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical ImplementationSunday, January 27, 13
  7. 7. THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical Implementation Problems and SolutionsSunday, January 27, 13
  8. 8. THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical Implementation Problems and Solutions The Future of Web TypeSunday, January 27, 13
  9. 9. THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical Implementation Problems and Solutions The Future of Web Type ResourcesSunday, January 27, 13
  10. 10. Our Definition of Web Type Non-system fonts, hosted remotely, that are displayed on a screen.Sunday, January 27, 13
  11. 11. What’s the Point?Sunday, January 27, 13
  12. 12. THE PURPOSE OF WEB TYPESunday, January 27, 13
  13. 13. THE PURPOSE OF WEB TYPE BrandingSunday, January 27, 13
  14. 14. THE PURPOSE OF WEB TYPE Branding DifferentiationSunday, January 27, 13
  15. 15. THE PURPOSE OF WEB TYPE Branding Differentiation For Your Readers’ SakeSunday, January 27, 13
  16. 16. Type FundamentalsSunday, January 27, 13
  17. 17. Character Terminology BASIC CHARACTER ANATOMYSunday, January 27, 13
  18. 18. C H A R A C T E R A N AT O M Y The parts of a character define its personality. Understanding the personality helps us choose readable typefaces and set them beautifully.Sunday, January 27, 13
  19. 19. The basic anatomy of charactersSunday, January 27, 13
  20. 20. Paragraph Terminology BASIC PARAGRAPH ANATOMYSunday, January 27, 13
  21. 21. P A R A G R A P H A N AT O M Y: M E A S U R E Measure Very simply, it is the length of a line of text. The general guideline is 40–65 characters, give or take and depending on the typeface.Sunday, January 27, 13
  22. 22. The measure needs to be just rightSunday, January 27, 13
  23. 23. P A R A G R A P H A N AT O M Y: L E A D I N G Leading and line height set the spacing between lines of type.Sunday, January 27, 13
  24. 24. The difference between leading a line heightSunday, January 27, 13
  25. 25. Leading in practiceSunday, January 27, 13
  26. 26. Exceptions to the leading rulesSunday, January 27, 13
  27. 27. Making Type Beautiful MORE THAN READABLESunday, January 27, 13
  28. 28. M A K I N G T Y P E B E AU T I F U L There are three main components of beautiful typography:Sunday, January 27, 13
  29. 29. M A K I N G T Y P E B E AU T I F U L There are three main components of beautiful typography: ContrastSunday, January 27, 13
  30. 30. M A K I N G T Y P E B E AU T I F U L There are three main components of beautiful typography: Contrast RhythmSunday, January 27, 13
  31. 31. M A K I N G T Y P E B E AU T I F U L There are three main components of beautiful typography: Contrast Rhythm SpacingSunday, January 27, 13
  32. 32. M A K I N G T Y P E B E AU T I F U L : C O N T R A S T Chose typefaces that are different from each other, but work well together. Make sure that different content (eg. headers, sub-heads, body copy) are visually differentiated.Sunday, January 27, 13
  33. 33. Typeface pairing examplesSunday, January 27, 13
  34. 34. M A K I N G T Y P E B E AU T I F U L : R H Y T H M Our eyes recognize—and look for— visual patterns in content. One way to achieve this rhythm is with a baseline grid that uses a shared baseline measurement across the units of content.Sunday, January 27, 13
  35. 35. Type with no rhythmSunday, January 27, 13
  36. 36. 20px Baseline GridSunday, January 27, 13
  37. 37. 20px baseline gridSunday, January 27, 13
  38. 38. M A K I N G T Y P E B E AU T I F U L : R H Y T H M Modular scale Another way to create rhythm is with a scale that relates to your content or context.Sunday, January 27, 13
  39. 39. M A K I N G T Y P E B E AU T I F U L : R H Y T H M Modular scale: an example 406.4 247 .1 251.1 Number 1: 14px (base type size) 169.4 104.7 Number 2: 40px (touch target size) 95.9 64.7 Ratio: 1:1.618 (golden section) 59.3 40.0 Multiply the numbers by the ratio to 36.6 24.7 derive a variety of number to use. 22.6 15.2 14.0 9.4 8.6Sunday, January 27, 13
  40. 40. 406.4 247 .1 251.1 169.4 104.7 95.9 64.7 59.3 40.0 36.6 24.7 22.6 15.2 14.0 9.4 8.6 Type with modular scaleSunday, January 27, 13
  41. 41. M A K I N G T Y P E B E AU T I F U L : R H Y T H M It’s easy to build your own scale: Use modularscale.com to do the math.Sunday, January 27, 13
  42. 42. M A K I N G T Y P E B E AU T I F U L : S P A C I N G The (negative) space around type is just as important as the content. Look for ways to creatively focus the readers eyes on the content.Sunday, January 27, 13
  43. 43. Spacing on theverge.comSunday, January 27, 13
  44. 44. Technical ImplementationSunday, January 27, 13
  45. 45. Implementation THIRD-PARTY SERVICES SELF-HOSTED FONT FILESSunday, January 27, 13
  46. 46. I M P L E M E N TAT I O N : 3 R D - P A RT Y S E RV I C E S 3rd-party services provide a license for the type, as well as plug-and-play code. Services allow access to a large type library for a reoccurring fee, usually based on a bandwidth or page-view metric.Sunday, January 27, 13
  47. 47. I M P L E M E N TAT I O N : U S I N G @ F O N T- F A C E Serving font files from your own server via the @font-face CSS attribute. Purchase a license and host font files on your own server. Easy to implement with CSS alone.Sunday, January 27, 13
  48. 48. I M P L E M E N TAT I O N : U S I N G @ F O N T- F A C E In your stylesheet: @font-face { ! font-family: ‘Univers Regular’; /* Typeface name */ ! src: url(Univers_Reg.eot?) format(embedded-opentype), ! ! ! /* IE, ? prevents a 404 on .woff/.ttf tiles */ ! url(Univers_Reg.otf) format(opentype), /* Moz/Webkit */ ! url(Univers_Reg.svg) format(svg); /* iOS < 4.0 */ } Then: p { ! font-family: ‘Univers Regular’, ‘Helvetica’, sans-serif; ! font-weight: 400; /* avoids browser issues */ }Sunday, January 27, 13
  49. 49. Browser Support NERVOUS?Sunday, January 27, 13
  50. 50. B ROW S E R S U P P O RT It’s pretty good actually (phew) If you serve the right font file, @font-face is supported by all modern browsers. The main exception is Opera Mini.Sunday, January 27, 13
  51. 51. I M P L E M E N TAT I O N : U S I N G @ F O N T- F A C E A note about formats: EOT (Embedded Open Type) works for IE and only for IE. OTF (Open-Type Font) is your best cross-browser option, with… TTF (True Type Font) and… WOFF (Web Open Font Format) coming in second. SVG fonts are a legacy for format for old version of iOS Safari, the Android browser & Chrome.Sunday, January 27, 13
  52. 52. Anticipating Problems & Finding SolutionsSunday, January 27, 13
  53. 53. Technical Issues DOWNLOAD SIZES SERVER REQUESTS TYPE UNITSSunday, January 27, 13
  54. 54. T E C H N I C A L I S S U E S : D OW N L O A D S I Z E S& Keeping download file size small will improve the experience all around. Minimize the size and number of different font files that a user has to download.Sunday, January 27, 13
  55. 55. TECHNICAL ISSUES: HTTP REQUESTS With each server request there is the potential for more issues.Sunday, January 27, 13
  56. 56. TECHNICAL ISSUES: TYPE UNITS With CSS, there are a variety of ways to define the size of type (and leading, spacing, layout…). Ems are still the best bet, but the math can get tricky since the context is important.Sunday, January 27, 13
  57. 57. Aesthetic Issues RESPONSIVE DESIGN SCREEN RENDERING FREE FONTS FONT STACKS READABILITYSunday, January 27, 13
  58. 58. AESTHETIC ISSUES: RESPONSIVE DESIGN As the layout changes with context, your type needs to change as well. When content width changes, the measure, leading and spacing should remain comfortable.Sunday, January 27, 13
  59. 59. AESTHETIC ISSUES: TYPE RENDERING ON SCREEN Type rendering can vary widely. Results will be different based on platform, operating system, browser, typeface and even the version of the typeface.Sunday, January 27, 13
  60. 60. Type rendering from vector to bitmapSunday, January 27, 13
  61. 61. A word of caution: beware the free web fonts.Sunday, January 27, 13
  62. 62. Dangerous waters ahead…Sunday, January 27, 13
  63. 63. A E S T H E T I C I S S U E S : F O N T S TA C K S Even though you’re serving font files, you still need to consider your font stacks.Sunday, January 27, 13
  64. 64. A E S T H E T I C I S S U E S : M A K I N G I T A L L WO R K There is really one thing that you can do to ensure excellent typography:Sunday, January 27, 13
  65. 65. A E S T H E T I C I S S U E S : M A K I N G I T A L L WO R K There is really one thing that you can do to ensure excellent typography: TestSunday, January 27, 13
  66. 66. The Future of Type on the WebSunday, January 27, 13
  67. 67. Symbol & Icon Fonts RESOLUTION-INDEPENDENT GRAPHICS FTWSunday, January 27, 13
  68. 68. SYMBOL & ICON FONTS Save bandwidth and gain resolution independence. Currently, the best usage is as icons to complement text or as fancy glyphs that have good fallbacks.Sunday, January 27, 13
  69. 69. The Foundation Icon Font…fontSunday, January 27, 13
  70. 70. Ligatures TWO USES FOR JOINING CHARACTERSSunday, January 27, 13
  71. 71. L I G AT U R E S Ligature support is on the horizon, but relies on support from both browser makers and type foundries, not to mention the operating system. Currently in the CSS3 draft as an option of the font-features-setting property.Sunday, January 27, 13
  72. 72. Why ligatures are importantSunday, January 27, 13
  73. 73. T H E L I T T L E S T U F F : L I G AT U R E S Beyond more pleasing character combinations, ligatures could allow creative use of type.Sunday, January 27, 13
  74. 74. FF ChartwellSunday, January 27, 13
  75. 75. Symbolset typefacesSunday, January 27, 13
  76. 76. ResourcesSunday, January 27, 13
  77. 77. R E S O U RC E S : M O D E R N I Z R Modernizr to detect @font-face supportSunday, January 27, 13
  78. 78. R E S O U RC E S : F O N T S Q U I R R E L @ F O N T- F A C E G E N E R AT O R Creates @font-face packagesSunday, January 27, 13
  79. 79. R E S O U RC E S : F O N T F O N T S U B S E T T E R Strip fonts of non-essential charactersSunday, January 27, 13
  80. 80. R E S O U RC E S : R E S P O N S I V E T Y P E FitText expands or shrinks type based on contextSunday, January 27, 13
  81. 81. Set web type in context, in real timeSunday, January 27, 13
  82. 82. R E S O U RC E S : L I N K S Slides and additional links available at: http://iracummings.com/type-talk/Sunday, January 27, 13
  83. 83. THANKS Any questions?Sunday, January 27, 13
  84. 84. CREDITS This presentation set in Univers and Hoefler Text, designed by Adrian Frutiger and Jonathan Hoefler, respectively. Demonstration copy is taken from en.wikipedia.org/wiki/Typography. All photographic images pulled from The Commons on flickr.com. All images of websites are captured from their respective domains. Other content and images created by Ira F. Cummings. This presentation created on a Mac with Keynote.Sunday, January 27, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×