Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing
for Words
Elements of Typographic Style for the Web
Luke Murphy-Wearmouth @lurkmoophy
I am not an expert.
I am an enthusiast.
leave the road
when you wish.
break the rules,
break them 

beautifully, deliberately 

and well.
The sections:
1. An Introduction to Type
2. Choosing the Right Tool
3. Typesetting for the Web
4. Typesetting for RWD
An Introduction
to Type
Typeface vs Font
1. Typeface — the overall design of a collection

Helvetica is a typeface
Typeface vs Font
1. Typeface — the overall design of a collection

Helvetica is a typeface
2. Font — The physical embodime...
Typeface vs Font
!
font is what you use
Typeface is what you see
Typesetting
1. Typesetting is the composition of text by means of
arranging physical types or the digital equivalents.
Anatomy of a character
1. x-height — the space between the baseline and the
mean line. The height of a lowercase x.
xbaseline
meanline
Anatomy of a character
1. x-height — the space between the baseline and the
mean line. The height of a lowercase x.
2. asc...
b
ascender
qdescender
Anatomy of a character
1. x-height — the space between the baseline and the
mean line. The height of a lowercase x.
2. asc...
H
cap-height
Anatomy of a character
4. counter — the open space within a letter, both partially
closed (c) and closed (o)
dcounter
Anatomy of a character
4. counter — the open space within a letter, both partially
closed (c) and closed (o)
5. serif — a ...
d
serif
serif
Kerning
1. adjusting the space between characters in a
proportional font to achieve a visually pleasing result
War
War
Leading
1. The space between baselines
Choosing
the Right Tool
A type that stops you
in the middle of a sentence
and asks you to admire its
smartness is a bad type
“
Legibility
& Beauty
The way we read
rodscones
rodscones
process detail
register sharpness
detect movement
sensitive in low light
rodscones
process detail
register sharpness
foveal
foveal parafoveal
foveal parafoveal peripheral
this is a sentence made of words
saccade
this is a sentence made of words
fixation point
The morning had dawned clear and cold, with a crispness that hinted at the end of
summer. They set forth at daybreak to se...
Testing
1. greater understanding > speed
the Rules
1. Read the text before designing it
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
4. H...
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
4. H...
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
4. H...
Learn the basics
of identification
3 contexts
1. Technical
What was the
original intended use?
Special effects
Consider usage
Licensing
3 contexts
1. Technical
2. Thematic
Suit the task
as well as the subject
3 contexts
1. Technical
2. Thematic
3. Historical
the natural idiom
Echos
& associations
Webfonts
1. Rendering
Type Rendering Mix
typerendering.com
Webfonts
1. Rendering
2. FOUT
http://help.typekit.com/customer/portal/articles/6853-styling-fallback-fonts-using-font-even...
Typesetting for
the Web
Modular scale
Use ems not pt
1. EU law
Use ems not pt
1. EU law
2. It keeps everything relative and scalable
Use ems not pt
1. EU law
2. It keeps everything relative and scalable
3. ems vs rems
Choosing your scale
!
0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5
http://www.type-scale.com.com/
Choosing your scale
!
0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5
p h4 h3 h2 h1
Choosing your scale
!
body {
font-size: 16px;
}
!
p {
font-size: 1em;
}
!
h1 {
font-size: 3em;
}
Margins
1. Lock the text block
Margins
1. Lock the text block
2. Frame the text block
Margins
1. Lock the text block
2. Frame the text block
3. Protect the text block
Margins
!
Rule of thumb: 5% either way
Margins
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
}
Measure
1. Ideal line length is 45-75 characters
http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-len...
Measure
1. Ideal line length is 45-75 characters
2. Dependent on the font, alignment etc.
Measure
1. Ideal line length is 45-75 characters
2. Dependent on the font, alignment etc.
3. Use ems not pxs/percentages
Measure
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
}
Letterspacing
1. Don’t letterspace lowercase letters without a reason
Letterspacing
1. Don’t letterspace lowercase letters without a reason
2. Letterspace strings of capitals, small caps and 
...
letter-spacing:
1. You can use positive and negative values
2. It’s animatable
3. Sub-pixel values aren’t cross-browser
letter-spacing:
!
h1 {
font-size: 3em;
letter-spacing: 1em;
}
!
.string-of-digits {
letter-spacing: 0.05em;
}
letter-spacing:
!
$( document ).ready( function() {

var rex = new RegExp( "([0-9]{3,})", “gm" );

$( “*” ).each( function...
Leading
1. Music is the space between notes
Leading
1. Music is the space between notes
2. It’s about vertical rhythm and feel
Leading
1. Music is the space between notes
2. It’s about vertical rhythm and feel
3. My rule of thumb: 140%
Leading
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
}
Kerning
1. Kern consistently or not at all
2. It’s more about font choice than technical solutions
text-rendering:
1. auto
text-rendering:
1. auto
2. optimizeSpeed
text-rendering:
1. auto
2. optimizeSpeed
3. optimizeLegibility
text-rendering:
1. auto
2. optimizeSpeed
3. optimizeLegibility
4. geometricPrecision
text-rendering:
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
/*probably not a go...
Kerning
1. Kern consistently or not at all
2. It’s more about font choice than technical solutions
3. kerning.js (if you’r...
Vertical space and rhythm
1. Tempo should not change arbitrarily in music
Vertical space and rhythm
1. Tempo should not change arbitrarily in music
2. Even multiples of the basic leading
Vertical space and rhythm
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
margin-bo...
Vertical space and rhythm
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em...
Vertical space and rhythm
1. Tempo should not change arbitrarily in music
2. Even multiples of the basic leading
3. Don’t ...
Vertical space and rhythm
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em...
Vertical space and rhythm
!
blockquote p, .hanging-punctuation {
text-indent: -0.5em;
}
Vertical space and rhythm
!
ul, ol {
padding-left: 0;
overflow: visible;
}
Types of dashes
1. Pedantry at its finest
Types of dashes
!
subtraction sign/hyphen -
en dash – –
em dash — —
http://en.wikipedia.org/wiki/Dash
Types of dashes
1. Pedantry at its finest
2. Use an en dashes with space either side in copy, 

or a close set em dash
Types of dashes
1. Pedantry at its finest
2. Use an en dashes with space either side in copy, 

or a close set em dash
3. ...
Hyphenation
1. Leave at least two characters behind
2. Take at least three forward
3. Avoid more than three hyphenated lin...
Quotation marks
1. " — straight quotes
2. ‘ ’ and “ ”
Quotation marks
!
str = str.replace(/"(?=w|$)/g, "“"); 

str = str.replace(/(?<=w|^)"/g, "”"); 

str = str.replace(/(?<=[w...
Columns
1. Now possible with CSS3 and column-count:
Columns
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em;
column-count: 3;...
Columns
1. Now possible with CSS3 and column-count:
2. A word of caution…
Rivers
1. Still manual
Widows & orphans
1. Widows still manual, using &nbsp;
Widows & orphans
1. Widows still manual, using &nbsp;
2. There are other solutions, but they come with a price
https://git...
Widows & orphans
1. Widows still manual, using &nbsp;
2. There are other solutions, but they come with a price
3. Orphans ...
Widows & orphans
1. Widows still manual, using &nbsp;
2. There are other solutions, but they come with a price
3. Orphans ...
Widows & orphans
!
@media print {
p {
orphans: 3;
}
}
Typesetting
and Responsive Web Design
The things that
don’t matter
!
(don’t hit me)
Aim for consistency
in quality
The things that
do matter
Typographic scale
http://typecast.com/blog/a-more-modern-scale-for-web-typography
Context
http://alistapart.com/column/responsive-typography-is-a-physical-discipline
The rabbit hole
colophon
!
The body text was set in Minion Pro Medium, Medium
Italic, Semibold and Semibold Italic
!
The code text was set...
Designing
for Words
Elements of Typographic Style for the Web
Luke Murphy-Wearmouth @lurkmoophy
Upcoming SlideShare
Loading in …5
×

Designing for words: elements of typography style for the web

639 views

Published on

An introduction to typography and the thinking behind typographic choices, as well as how we can implement these rules and guides on the web. Delivered at Second Wednesday (#secwed) on Wednesday 13th August, 2014

Published in: Design
  • Be the first to comment

Designing for words: elements of typography style for the web

  1. 1. Designing for Words Elements of Typographic Style for the Web Luke Murphy-Wearmouth @lurkmoophy
  2. 2. I am not an expert. I am an enthusiast.
  3. 3. leave the road when you wish.
  4. 4. break the rules, break them 
 beautifully, deliberately 
 and well.
  5. 5. The sections: 1. An Introduction to Type 2. Choosing the Right Tool 3. Typesetting for the Web 4. Typesetting for RWD
  6. 6. An Introduction to Type
  7. 7. Typeface vs Font 1. Typeface — the overall design of a collection
 Helvetica is a typeface
  8. 8. Typeface vs Font 1. Typeface — the overall design of a collection
 Helvetica is a typeface 2. Font — The physical embodiment of a collection of letters, numbers, symbols etc.
 Helvetica Bold is a font
  9. 9. Typeface vs Font ! font is what you use Typeface is what you see
  10. 10. Typesetting 1. Typesetting is the composition of text by means of arranging physical types or the digital equivalents.
  11. 11. Anatomy of a character 1. x-height — the space between the baseline and the mean line. The height of a lowercase x.
  12. 12. xbaseline meanline
  13. 13. Anatomy of a character 1. x-height — the space between the baseline and the mean line. The height of a lowercase x. 2. ascenders and descenders — the tops and bottoms of letters like b, d, j, q
  14. 14. b ascender qdescender
  15. 15. Anatomy of a character 1. x-height — the space between the baseline and the mean line. The height of a lowercase x. 2. ascenders and descenders — the tops and bottoms of letters like b, d, j, q 3. cap-height — height of a capital letter
  16. 16. H cap-height
  17. 17. Anatomy of a character 4. counter — the open space within a letter, both partially closed (c) and closed (o)
  18. 18. dcounter
  19. 19. Anatomy of a character 4. counter — the open space within a letter, both partially closed (c) and closed (o) 5. serif — a little stroke found at the end of main vertical and horizontal strokes of some letterforms
  20. 20. d serif serif
  21. 21. Kerning 1. adjusting the space between characters in a proportional font to achieve a visually pleasing result
  22. 22. War
  23. 23. War
  24. 24. Leading 1. The space between baselines
  25. 25. Choosing the Right Tool
  26. 26. A type that stops you in the middle of a sentence and asks you to admire its smartness is a bad type “
  27. 27. Legibility & Beauty
  28. 28. The way we read
  29. 29. rodscones
  30. 30. rodscones process detail register sharpness
  31. 31. detect movement sensitive in low light rodscones process detail register sharpness
  32. 32. foveal
  33. 33. foveal parafoveal
  34. 34. foveal parafoveal peripheral
  35. 35. this is a sentence made of words saccade
  36. 36. this is a sentence made of words fixation point
  37. 37. The morning had dawned clear and cold, with a crispness that hinted at the end of summer. They set forth at daybreak to see a man beheaded, twenty in all, and Bran rode among them, nervous with excitement. This was the first time he had been deemed old enough to go with his lord father and his brothers to see the king's justice done. It was the ninth year of summer, and the seventh of Bran's life. ! The man had been taken outside a small holdfast in the hills. Robb thought he was a wildling, his sword sworn to Mance Rayder, the King-beyond-the-Wall. It made Bran's skin prickle to think of it. He remembered the hearth tales Old Nan told them. The wildlings were cruel men, she said, slavers and slayers and thieves. They consorted with giants and ghouls, stole girl children in the dead of night, and drank blood from polished horns. And their women lay with the Others in the Long Night to sire terrible half-human children.
  38. 38. Testing 1. greater understanding > speed
  39. 39. the Rules 1. Read the text before designing it
  40. 40. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text
  41. 41. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements
  42. 42. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements 4. Honour and elucidate the character of the text
  43. 43. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements 4. Honour and elucidate the character of the text 5. Shape the page
  44. 44. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements 4. Honour and elucidate the character of the text 5. Shape the page 6. Give full attention to incidental details
  45. 45. Learn the basics of identification
  46. 46. 3 contexts 1. Technical
  47. 47. What was the original intended use?
  48. 48. Special effects
  49. 49. Consider usage
  50. 50. Licensing
  51. 51. 3 contexts 1. Technical 2. Thematic
  52. 52. Suit the task as well as the subject
  53. 53. 3 contexts 1. Technical 2. Thematic 3. Historical
  54. 54. the natural idiom
  55. 55. Echos & associations
  56. 56. Webfonts 1. Rendering
  57. 57. Type Rendering Mix typerendering.com
  58. 58. Webfonts 1. Rendering 2. FOUT http://help.typekit.com/customer/portal/articles/6853-styling-fallback-fonts-using-font-events ! http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/
  59. 59. Typesetting for the Web
  60. 60. Modular scale
  61. 61. Use ems not pt 1. EU law
  62. 62. Use ems not pt 1. EU law 2. It keeps everything relative and scalable
  63. 63. Use ems not pt 1. EU law 2. It keeps everything relative and scalable 3. ems vs rems
  64. 64. Choosing your scale ! 0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5 http://www.type-scale.com.com/
  65. 65. Choosing your scale ! 0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5 p h4 h3 h2 h1
  66. 66. Choosing your scale ! body { font-size: 16px; } ! p { font-size: 1em; } ! h1 { font-size: 3em; }
  67. 67. Margins 1. Lock the text block
  68. 68. Margins 1. Lock the text block 2. Frame the text block
  69. 69. Margins 1. Lock the text block 2. Frame the text block 3. Protect the text block
  70. 70. Margins ! Rule of thumb: 5% either way
  71. 71. Margins ! p { font-size: 1em; width: 90%; margin: 0 auto; }
  72. 72. Measure 1. Ideal line length is 45-75 characters http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  73. 73. Measure 1. Ideal line length is 45-75 characters 2. Dependent on the font, alignment etc.
  74. 74. Measure 1. Ideal line length is 45-75 characters 2. Dependent on the font, alignment etc. 3. Use ems not pxs/percentages
  75. 75. Measure ! p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; }
  76. 76. Letterspacing 1. Don’t letterspace lowercase letters without a reason
  77. 77. Letterspacing 1. Don’t letterspace lowercase letters without a reason 2. Letterspace strings of capitals, small caps and 
 strings of digits
  78. 78. letter-spacing: 1. You can use positive and negative values 2. It’s animatable 3. Sub-pixel values aren’t cross-browser
  79. 79. letter-spacing: ! h1 { font-size: 3em; letter-spacing: 1em; } ! .string-of-digits { letter-spacing: 0.05em; }
  80. 80. letter-spacing: ! $( document ).ready( function() {
 var rex = new RegExp( "([0-9]{3,})", “gm" );
 $( “*” ).each( function(){
     var $this = $( this );
     var content = $this.html();
    $this.html( content.replace( rex, “<span class=
 “string-of-digits”>$1</span>” ) );
 });
 });

  81. 81. Leading 1. Music is the space between notes
  82. 82. Leading 1. Music is the space between notes 2. It’s about vertical rhythm and feel
  83. 83. Leading 1. Music is the space between notes 2. It’s about vertical rhythm and feel 3. My rule of thumb: 140%
  84. 84. Leading ! p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; line-height: 1.4em; }
  85. 85. Kerning 1. Kern consistently or not at all 2. It’s more about font choice than technical solutions
  86. 86. text-rendering: 1. auto
  87. 87. text-rendering: 1. auto 2. optimizeSpeed
  88. 88. text-rendering: 1. auto 2. optimizeSpeed 3. optimizeLegibility
  89. 89. text-rendering: 1. auto 2. optimizeSpeed 3. optimizeLegibility 4. geometricPrecision
  90. 90. text-rendering: ! p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; line-height: 1.4em; /*probably not a good idea yet */ text-rendering: optimizeLegibility }
  91. 91. Kerning 1. Kern consistently or not at all 2. It’s more about font choice than technical solutions 3. kerning.js (if you’re a control freak) #pixel-perfect { -letter-kern: 1px 1px 0 0 0   1px 0 2px 0 0   0 0 0; } !
  92. 92. Vertical space and rhythm 1. Tempo should not change arbitrarily in music
  93. 93. Vertical space and rhythm 1. Tempo should not change arbitrarily in music 2. Even multiples of the basic leading
  94. 94. Vertical space and rhythm ! p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; line-height: 1.4em; margin-bottom: 0.7em; }
  95. 95. Vertical space and rhythm ! p { font-size: 1em; width: 90%; margin: 0 auto 0.7em auto; max-width: 33em; line-height: 1.4em; }
  96. 96. Vertical space and rhythm 1. Tempo should not change arbitrarily in music 2. Even multiples of the basic leading 3. Don’t interrupt the rhythm of the page
  97. 97. Vertical space and rhythm ! p { font-size: 1em; width: 90%; margin: 0 auto 0.7em auto; max-width: 33em; line-height: 1.4em; hanging-punctuation: first; }
  98. 98. Vertical space and rhythm ! blockquote p, .hanging-punctuation { text-indent: -0.5em; }
  99. 99. Vertical space and rhythm ! ul, ol { padding-left: 0; overflow: visible; }
  100. 100. Types of dashes 1. Pedantry at its finest
  101. 101. Types of dashes ! subtraction sign/hyphen - en dash – &ndash; em dash — &mdash; http://en.wikipedia.org/wiki/Dash
  102. 102. Types of dashes 1. Pedantry at its finest 2. Use an en dashes with space either side in copy, 
 or a close set em dash
  103. 103. Types of dashes 1. Pedantry at its finest 2. Use an en dashes with space either side in copy, 
 or a close set em dash 3. Use a close set en dash for ranges
  104. 104. Hyphenation 1. Leave at least two characters behind 2. Take at least three forward 3. Avoid more than three hyphenated lines 4. Hyphenate according to conventions of language
  105. 105. Quotation marks 1. " — straight quotes 2. &lsquo; &rsquo; and &ldquo; &rdquo;
  106. 106. Quotation marks ! str = str.replace(/"(?=w|$)/g, "“"); 
 str = str.replace(/(?<=w|^)"/g, "”"); 
 str = str.replace(/(?<=[w,.?!)]|^)"/g, "”");
  107. 107. Columns 1. Now possible with CSS3 and column-count:
  108. 108. Columns ! p { font-size: 1em; width: 90%; margin: 0 auto 0.7em auto; max-width: 33em; line-height: 1.4em; column-count: 3; column-gap: 1.4em; -moz-column-count: 3; -moz-column-gap: 1.4em; -webkit-column-count: 3; -webkit-column-gap: 1.4em; }
  109. 109. Columns 1. Now possible with CSS3 and column-count: 2. A word of caution…
  110. 110. Rivers 1. Still manual
  111. 111. Widows & orphans 1. Widows still manual, using &nbsp;
  112. 112. Widows & orphans 1. Widows still manual, using &nbsp; 2. There are other solutions, but they come with a price https://github.com/matthewlein/jQuery-widowFix
  113. 113. Widows & orphans 1. Widows still manual, using &nbsp; 2. There are other solutions, but they come with a price 3. Orphans apparently sorted by the column algorithm
  114. 114. Widows & orphans 1. Widows still manual, using &nbsp; 2. There are other solutions, but they come with a price 3. Orphans apparently sorted by the column algorithm 4. Don’t forget print
  115. 115. Widows & orphans ! @media print { p { orphans: 3; } }
  116. 116. Typesetting and Responsive Web Design
  117. 117. The things that don’t matter ! (don’t hit me)
  118. 118. Aim for consistency in quality
  119. 119. The things that do matter
  120. 120. Typographic scale http://typecast.com/blog/a-more-modern-scale-for-web-typography
  121. 121. Context http://alistapart.com/column/responsive-typography-is-a-physical-discipline
  122. 122. The rabbit hole
  123. 123. colophon ! The body text was set in Minion Pro Medium, Medium Italic, Semibold and Semibold Italic ! The code text was set in Lucida Console Regular.
  124. 124. Designing for Words Elements of Typographic Style for the Web Luke Murphy-Wearmouth @lurkmoophy

×