Typography Fundamentals

Typography Fundamentals

Presented by Steve Hickey — fresh tilled soil

fresh tilled soil

Typography Fundamentals

fresh tilled soil Typography Fundamentals

Objective

My objectives today are to impart a basic understanding of the fundamental rules of good typography and to show everyone how they fit into user interface and web product design.


01 Letterform, Text, Hierarchy & CHoiceTypographic building blocks


Letterform — Anatomy

Bahpfesffstem

crossbar

bowl serif

ascender

descender

counter

terminal

finial

spine

ligature


Letterform — Anatomy

Bxhydescender height

baseline

x height

cap height

ascender height

overhang


Letterform — Classification

Aao Aao Aaomodern serif — Bodonitransitional serif — Baskervillehumanist serif — Garamond


Letterform — Classification

Aao Aaogeometric sans-serif — Futuratransitional sans-serif — Helveticahumanist sans-serif — Gill Sans

Aao


Letterform — Punctuation

-–—hyphen en dash em dash

The sentence spanned lines 2–8 in an unbrok- en stream — onward it swept.

“” '' ̋smart quotes dumb quotes

“Look at Donny’s pet! An 8´ 7˝ tall ostrich!”

primes

Here’s a second line so that I can make a point.

Hyphens are - En dashes are – Em dashes are —

Double smart quotes are “ and ” Single smart quotes are ‘ and ’ Primes are ′ !Nobody likes dumb quotes. They’re called dumb for a reason.


Text — Size

Size has the greatest effect on readability of text and must be considered carefully.

A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air.

28px text

/* different units for setting type size */ !p { font-size: 1em; } !p { font-size: 100%; } !p { font-size: 16px; } !p { font-size: 16pt; }


36px text


20px text


Text — Line-Height

Line-height is the distance from baseline to baseline in a block of text.



28px text 1em line-height

28px text 1.2em line-height

/* line-height as multiple of text size */ !p { font-size: 1em; line-height: 1.6; }


Text — Measure

Measure is calculated in characters or words per line in a paragraph.



approx. 60 characters per line

approx. 30 characters per line

/* width of paragraph set by container */ !.container { width: 66%; } !.container p { font-size: 1em; line-height: 1.6; width: 100%; }


Text — Alignment

Text alignment has multiple options that affect readability.

left aligned

center aligned

right aligned

justified


A worker climbs to the top of the crate. The search lights are trained on the door. The

riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current

cracking through the air.

A worker climbs to the top of the crate. The search lights are trained on the door. The

riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current

cracking through the air.


/* default is left aligned */ !p.text-align-left { text-align: left; } !p.text-align-right { text-align: right; } !p.text-align-center { text-align: center; } !p.text-align-justified { text-align: justified; }


Text — Tracking


A worker c l imbs to the top of the crate . The search l ig hts are tra ine d on the door. The ri f lemen throw the bolts on their ri f les and crack their stun g uns, sending arcs of current cracking throug h the a ir.

text with normal tracking

text with 10% tracking

Tracking is an adjustment of the space between all characters in a block of text.

“Anyone who would letterspace the lowercase would shag sheep.” Frederic Goudy

/* all caps and letterspaced headers */ !h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: 0.25em; }


Text — Kerning

un-kerned pairing Tyson

Tysonkerned pairing

Kerning is an adjustment of the space between two characters.

/* ligatures/kerning in some browsers */ !h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } !/* control spacing with Kerning.JS */ !#kern-me { -letter-kern: 1px 1px 0 0 0 1px 0 2px; }


Text — How To Make It Sing

All of these traits must be balanced in a block of text. There are no absolute rules as to what works, but there are guidelines.

Font-size: Start around 16px/1em for web type. It needs to be larger than print.

Line-Height: Use a multiple of 1.3 to 1.6 times the font size.

Measure: Use 50 to 75 characters or 12 words per line.

Kerning: Larger text makes errors more obvious, requiring custom kerning.

Tracking: Use default in the lowercase, space it out a bit in the uppercase.

Alignment: Left-aligned, or justified if you have a high level of control.


Text — How To Make It Sing

A good block of text looks grey if you un-focus your eyes a bit.


Hierarchy — Scale

Scale differences are the quickest way to create an obvious hierarchy.



28px heading 28px text

45px heading 28px text

A Heading For This Text Block


body { font-size: 100%; } /* usually 16px */ !p { font-size: 1.75em; } /* 28px @ 100% */ !h1 { font-size: 2.8125em; } /* 45px @ 100% */ !h2 { font-size: 2.625em; } /* 42px @ 100% */


Hierarchy — Using a Modular Scale

A modular scale can help you create a full system of typographic hierarchy. 24px @ 1:1.61829px @ 1:1.618

generated by http://modularscale.com

76px heading Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 !A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air.

63px heading

47px heading

39px heading

29px heading

24px text 29px line-height

body { font-size: 100%; } /* usually 16px */ !p { font-size: 1.5em; } /* 24px @ 100% */ !h1 { font-size: 4.75em; } /* 76px @ 100% */ !h2 { font-size: 3.9375em; } /* 63px @ 100% */

http://modularscale.com


Hierarchy — Color

Color changes are another way to establish a difference in hierarchy.



same color as text

contrasting color



p { color: black; } !h1, h2, h3, h4, h5, h6 { color: blue; }


Hierarchy — Value

Changing the value, or relative lightness/darkness, will set two elements apart.



same value as text

contrasting value



p { color: rgb(128, 128, 128); } !h1, h2, h3, h4, h5, h6 { color: rgb(0, 0, 0); }


Hierarchy — Style

A different style is an effective way to set visual distinctiveness.



same style as text

contrasting style



p { font-weight: normal; } !h1, h2, h3, h4, h5, h6 { font-weight: bold; }


Hierarchy — Placement

The placement of text also helps to determine hierarchy.



same alignment as text

contrasting placement



p { margin: 0 0 1em 0; } !h1, h2, h3, h4, h5, h6 { margin: 0 0 2em -1em; }


Choice — Features

The first step in choosing a typeface is to make sure it has all the features you need for what a project demands. !

High-quality typefaces feature a complete character set, a variety of weights and styles, several types of numbers, and can even go as far as supporting different languages.


Choice — Features

Some typefaces have extensive style options.

Helvetica Neue Bold Helvetica Neue Medium Helvetica Neue RegularHelvetica Neue Light Helvetica Neue Ultralight

Helvetica Neue Bold Italic Helvetica Neue Italic Helvetica Neue Light Italic Helvetica Neue Ultralight Italic


Choice — Features

Others have multiple types of numbers, which can be vital for certain projects.

monospaced, uppercase

monospaced, lowercase

proportionally spaced, uppercase

proportionally spaced, lowercase


Choice — Features

Not all projects call for just a Latin language character set.

latin

abcdefghijklmnopqrstuvwxyz

cyrillic

greek

абвгдеёжзийклмнопрстуфхцчшщъыьэюя

αβγδεζηθικλμνξοπρσςτυφχψω


Choice — Pairing

When pairing typefaces look for similar forms, but also look to create some contrast between them. If they’re too similar then there’s no point in using them both.

Bodoni with Futura

the quick brown fox jumped over the lazy

Helvetica with Garamond

Baskerville with Univers

the quick brown fox jumped over the lazythe quick brown fox jumped over the lazy


Choice — Personality

The character of the typeface you use can completely change a word’s meaning.

sophisticated sophisticated

classy classysweet sweet


Examples — Minimalissimo.com


Examples — WalkaboutNYC.com


Examples — Mailchimp.Com/2012


Examples — Hlvticons.ch


Examples — ElliotJayStocks.com


Examples — co-opbranding.com


Examples — blackestate.co.nz


02 Implementing Type On The WebThe good, the bad & the ugly


The State of Web Type

The state of typography on the web is, in a word, frustrating. Many of the things I just showed you either can’t be done, or are very hard to do.

(you’re welcome)



But they’re very important to know. Why?

1. You need to be able to work around your own limitations. 2.These techniques are creeping into specifications and plugins. 3.Many of your competitors will be using them to improve their products.



Print-quality type is becoming possible on the web. Embrace it or fall behind.


Serving Web Fonts — Defaults

There are certain fonts you can reasonably expect to be installed on most devices. To cover your bases you call them with a font stack in your css.

h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; } !

p { font-family: 'Times New Roman', Georgia, serif; }


Serving Web Fonts — Defaults

These fonts are very basic. They work, and they’re consistent, but they aren’t great.

Times New Roman Georgia Helvetica / Arial!Verdana


Serving Web Fonts — @font-face and font Services

To get something more interesting you can:

• store font files on your site and use @font-face in css. • use a font service like Typekit or Google Web Fonts.

fresh tilled soil Typography Fundamentalsfresh tilled soil Typography Fundamentals

Serving Web Fonts — @font-face

I put together a SASS mixin for bulletproof @font-face that you can find here: http://codepen.io/cfarm/pen/arBLb

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compatability Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#MyWebFont') format('svg'); /* Legacy iOS */ font-weight: normal; font-style: normal; } !p { font-family: 'MyWebFont', Helvetica, Arial, sans-serif; }

Derived from this research http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/


Serving Web Fonts — Font Services

Typekit and Google Web Fonts allow you to serve a variety of fonts from their servers with a snippet of code in your html.

 <script type="text/javascript" src="//use.typekit.net/ssj0eha.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> !

 <link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet' type='text/css'>

http://fonts.googleapis.com/css?family=Gafata'


Serving Web Fonts — Font Services

Then, you just add the typeface’s name to your font stacks in your css.

h1, h2, h3, h4, h5, h6 { /* Google Web Fonts */ font-family: 'Gafata', Helvetica, Arial, sans-serif; } !

p { /* Typekit */ font-family: 'source-sans-pro', source-sans-pro, Arial, sans-serif; }


03 ResourcesThe good, the bad & the ugly


Resources

Thinking With Type thinkingwithtype.com

=


Resources

The Elements of Typographic Style webtypography.net

=


Resources

practicaltypography.com


Resources

ia.net/blog

Date post:	27-Jan-2015
Category:	Design
Upload:	steve-hickey
View:	150 times
Download:	4 times

Typography Fundamentals

Design