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

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/

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 – &ndash; em dash — &mdash;

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. &lsquo; &rsquo; and &ldquo; &rdquo;

Quotation marks !

str = str.replace(/"(?=\w|$)/g, "&#8220;"); str = str.replace(/(?<=\w|^)"/g, "&#8221;"); str = str.replace(/(?<=[\w,.?!\)]|^)"/g, "&#8221;");

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 &nbsp;

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

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

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

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