Post on 22-Nov-2014
description
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 embodiment of a collection of
letters, numbers, symbols etc. Helvetica Bold is a font
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. ascenders and descenders — the tops and bottoms of
letters like b, d, j, q
bascender qdescender
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
Hcap-height
Anatomy of a character 4. counter — the open space within a letter, both partially
closed (c) and closed (o)
d counter
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
dserif
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 wordsfixation point
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.
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. Honour and elucidate the character 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 4. Honour and elucidate the character of the text 5. Shape the page
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
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
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/
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-length-testing/
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
strings of digits
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(){ var $this = $( this ); var content = $this.html(); $this.html( content.replace( rex, “<span class= “string-of-digits”>$1</span>” ) ); });});
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 good idea yet */ text-rendering: optimizeLegibility }
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; } !
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-bottom: 0.7em; }
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 interrupt the rhythm of the page
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; }
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. Use a close set en dash for ranges
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
Quotation marks 1. " — straight quotes 2. ‘ ’ and “ ”
Quotation marks !
str = str.replace(/"(?=\w|$)/g, "“"); str = str.replace(/(?<=\w|^)"/g, "”"); str = str.replace(/(?<=[\w,.?!\)]|^)"/g, "”");
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; column-gap: 1.4em; -moz-column-count: 3; -moz-column-gap: 1.4em; -webkit-column-count: 3; -webkit-column-gap: 1.4em; }
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
Widows & orphans 1. Widows still manual, using 2. There are other solutions, but they come with a price
https://github.com/matthewlein/jQuery-widowFix
Widows & orphans 1. Widows still manual, using 2. There are other solutions, but they come with a price 3. Orphans apparently sorted by the column algorithm
Widows & orphans 1. Widows still manual, using 2. There are other solutions, but they come with a price 3. Orphans apparently sorted by the column algorithm 4. Don’t forget print
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 in Lucida Console Regular.
Designing for Words
Elements of Typographic Style for the Web
Luke Murphy-Wearmouth @lurkmoophy