Designing for words: elements of typography style for the web

Designing
for Words
Elements of Typographic Style for the Web
Luke Murphy-Wearmouth @lurkmoophy

I am not an expert.
I am an enthusiast.

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

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.

2. ascenders and descenders — the tops and bottoms of
letters like b, d, j, q

2. ascenders and descenders — the tops and bottoms of
letters like b, d, j, q
3. cap-height — height of a capital letter

4. counter — the open space within a letter, both partially
closed (c) and closed (o)

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

Kerning
1. adjusting the space between characters in a
proportional font to achieve a visually pleasing result

Leading
1. The space between baselines

A type that stops you
in the middle of a sentence
and asks you to admire its
smartness is a bad type
“

rodscones
process detail
register sharpness

detect movement
sensitive in low light
rodscones
process detail
register sharpness

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 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
2. Work out the inner logic of the text

the Rules
3. Consider the other elements

the Rules
4. Honour and elucidate the character of the text

the Rules
5. Shape the page

the Rules
5. Shape the page
6. Give full attention to incidental details

Learn the basics
of identification

What was the
original intended use?

3 contexts
1. Technical
2. Thematic

Suit the task
as well as the subject

3 contexts
1. Technical
2. Thematic
3. Historical

Type Rendering Mix
typerendering.com

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/

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
2. Frame the text block

Margins
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
2. Dependent on the font, alignment etc.

Measure
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
2. It’s about vertical rhythm and feel

Leading
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
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

2. Even multiples of the basic leading

!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
margin-bottom: 0.7em;
}

!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em;
}

2. Even multiples of the basic leading
3. Don’t interrupt the rhythm of the page

!
p {
font-size: 1em;
width: 90%;
max-width: 33em;
line-height: 1.4em;
hanging-punctuation: first;
}

!
blockquote p, .hanging-punctuation {
text-indent: -0.5em;
}

!
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
2. Use an en dashes with space either side in copy,  
or a close set em dash

Types of dashes
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%;
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…

Widows & orphans
1. Widows still manual, using  

Widows & orphans
2. There are other solutions, but they come with a price
https://github.com/matthewlein/jQuery-widowFix

Widows & orphans
3. Orphans apparently sorted by the column algorithm

Widows & orphans
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

Typographic scale
http://typecast.com/blog/a-more-modern-scale-for-web-typography

Context
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

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 typography style for the web

More Related Content

Similar to Designing for words: elements of typography style for the web (20)

Recently uploaded (20)

Designing for words: elements of typography style for the web

Editor's Notes