< font >

Web Typography

Font Faces &Font Families

Font: a specific alphabet in a specific style, weight and size

Font family: a collection of similarly designed fonts:

• Helvetica Neue UltraLight
• Helvetica Neue UltraLight Oblique
• Helvetica Neue Light
• Helvetica Neue Light Oblique
• Helvetica Neue Regular
• Helvetica Neue Regular Oblique
• Helvetica Neue Bold
• Helvetica Neue Bold Oblique

A font is a specific alphabet (set of glyphs) in a specific face, weight and size. So 10pt Garamond Bold would be one font, 12pt Garamond Italic would be another.

Fonts are grouped together in collections of similarly designed faces called font families or typefaces - what we generally think of as a font (Arial, Helvetica, Caslon, Bodoni, etc.)

Serif

Sans-serif

• Gill Sans
• Futura
• Avenir

Monospaced

Serifs are small projections attached to the ends of strokes that make up each character. Serifed fonts were generally used for print body text, as they were thought to increase readability, although there is now debate about this. Sans-serif fonts have generally been thought to be more readable on screen, as serifs aren’t always rendered well on lower resolution screens.

Sans-serif fonts obviously don’t have serifs.

Monospace fonts are those in which every glyph occupies the same width (unlike other fonts in which glphs are different widths).

Glyphs

Characters in a font

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

à á â ã ä å æ

¢ £ © ® ¼ & < > ⁄ % ( ) + = - – — | ~

A glyph is an unique symbol within a font to represent a letter, number or punctuation.

Different glyphs can be used to represent the same character or set of characters – uppercase, lowercase, ligatures, stylistic variations.

Not all fonts or families will have a complete set of glyphs, so it’s possible that some of the characters you would like to used may be missing.

Some specialised typefaces have very specific sets of glyphs – icon fonts are becoming much more common in order to handle high resolution displays.

Font Size

font-size {}

3 em

2 em

1 em

1 em

0.5 em

In print, this is described in points or picas, but on the web it is described in pixels or ems.

This can be set with pixel height, but it’s recommended to use em rather than pixels to allow users to resize the text in the browser menu. Em units are recommended by W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

x-height

The distance between the baseline and the mean line of lower-case letters in a typeface.

This is generally the height of the letter x.

This is the distance between the baseline and the mean line of lower-case letters in a typeface, which is generally the height of the letter x.

Different fonts will have different x heights at a similar size, which will affect their readability and overall impact.

CSS does have an `ex` unit, which is realtive to the x-height of the current font, but different browsers handle this extremely differently and it’s rarely used.

Kerning

The space between individual characters

The space between individual characters, adjusted to increase readability and improve visual appeal. Particularly in letter combinations such as AW, AV, Yo, and with punctuation that is often brought under overhanging parts of other characters.

Tracking

The space between characters in a line of text

letter-spacing

Letter spacing of two pixels

Letter spacing of minus three pixels

Tracking is the space between all characters in a line or paragraph, which can be set with the letter-spacing CSS attribute, adding or subtracting space between characters.

Leading

The space between lines

line-height

For readability, this is usually more than the default height of the font – usually around 20% more for body text:

line-height: 1.2em

The space between lines of text is referred to as leading in print typography, and refers to the distance between the baselines of successive lines of type. Strips of lead used to be used to separate the lines of type from another and increase the line height.

Leading or line-height can be used to increase readability of type. Greater space between lines of type means that the eye can more easily pick out type with a smaller x-height, and follow long-form type better.

Measure

The length of a line of text

This should be between 45 and 75 characters,with an optimum length of 65.

The length of a line of text. For a single column layout, the measure should be between 45 and 75 characters, with the optimimum generally considered to be 65 characters per line.

‘Smart Quotes’

‘ ’ not ' '

&lsquo; &rsquo;

“ ” not " "

&ldquo; &rdquo;

For measurements, use primes:

40° 44′ 54.3588″ N, 73° 59′ 8.3616″ W

&prime; &Prime;

Text should use typographer’s quotes/smart quotes/curly quotes wherever possible.

For measurements map coordinates, time and measurements in feet and inches, you should use primes – eg. 40° 44′ 54.3588″ N, 73° 59′ 8.3616″ W.

Hyphens and Dashes

Hyphen

Separates parts of words or joins com pound words.

En Dash: &ndash;

Indicates a range of values: eg. 2014–2015or connection between words: eg. Anglo–American relations.

It can also be used parenthetically, with spaces:eg. She looked – with deep regret – at the terrible punctuation.

Em Dash: &mdash;

Can be used parenthetically:eg. She looked—with deep regret—at the terrible punctuation.

Hyphens are a punctuation mark, used to combine compound words, and separate words across lines. They shouldn’t be confused with the two typographic dashes, N and M dashes.

An en dash or N dash is typically the width of the capital N character in a given typeface. En dashes indicates range of values (eg. 2014–2015) or connection between words (eg. Anglo–American relations), both unspaced. It can also be used parenthetically, with spaces (eg. She looked – with deep regret – at the terrible punctuation). En dashes are much more common in the UK, and em dashes are rarely used.

An em dash or M dash is typically the width of the capital M character in a given typeface. Em dashes are much more common in the US, where they are used un-spaced to break up parts of a sentence/in place of parentheses (eg. She looked—with deep regret—at the terrible punctuation).

A Few Examples

• The Guardian
• The New York Times
• Medium
• Quartz
• Exposure
• Aria Studio
• Rails Assets
• Pelican Books