Typography

Typefaces give voies to words.

We often take it for granted that part of the pleasure of reading a book or seeing an opening credits to a movie is experiencing a font (or typeface).

same letters, same size, different impression

Typefaces are further divided into font families that contain variations of that font – regular, bold, italic and others.

Minion Pro has a very large family. Many font families only have 4: regular, italic, bold-italic, and bold

There are many typefaces in existence. Most of them can be divided into two categories:
Serif – font features horizontal and vertical details that are added to the beginning and end of the characters.
and
Sans-serif – typeface does not have serifs.

the font on the left is a serif font, the font on the right is sans serif font

There are four other categories that distinguish one font family from another:

Script, Hand-lettered – get their inspiration from hand-lettered forms; some are calligraphic in nature, others have been created based on handwriting:

Monospace –  the character and spacing widths within a monospaced font are all identical. Typewriters use a monospaced system for their letterforms. Many modern fonts that are designed for pixel-based, on-screen presentations are also monospaced. These fonts usually contain a combination of serif and sans-serif fonts:

Novelty –  anything goes in this category – from slightly tweaked to the utterly bizarre. Novelty fonts tend to change very fast. Some might be in favor this month and others next month:

 

A lot of novelty fonts have poor readability and often used in as accents in typographic design

Dingbat, Ornament – The keyboard can also be used to place images. Dingbat and ornament fonts are comprised of images, graphic elements, and flourishes:

Typeface Legibility:

  1. Legibility, the ease with which viewer can read a headline or passage of text is a crucial consideration when it comes to choosing and using typeface.
  2. Audience: older and conservative audience are usually less tolerant of difficult to read fonts than younger and progressively-minded audiences.
  3. Many factors affect legibility: font choice, size, color, letterspacing, case (upper vs. lower) and the backdrop behind the text.
Type that is presented in upper and lower case is generally considered the easiest to read:
A serif font, upper and lower case, is the most legible – especially for extended passages of text:
you can seldom find a book typeset in sans-serif type for the main body of text
All-caps are fine for headlines and brief caption but create a readability issue when used for longer passages:
Too much or too little spacing can interfere with legibility:
Novelty fonts do well in conveying certain themes, though sometimes at the expense of legibility:
Take the eyesight of the target audience into account when choosing a type size. Small text might alienate older readers:
Color also affects legibility:
Extremely condensed or wide/expanded typefaces may help with layout issues, but again, at the expense of legibility:
Progressively-minded viewers are often more tolerant of legibility issues than more conservative audiences:
Selecting a font is not the only aspect that affects the readability of the text. Other issue at play is alignment. Alignment is also important in establishing relationships between text and other elements on the page. The most common methods of alignment are:
  1. Flush Left – the left edge of the text is aligned vertically. The text on this blog is flush left aligned. It helps the readability by providing a consistent starting point for each line of text.
  2. Flush Right – is not as reader friendly as flash left because the starting point of each line of text is different. Flash left alignment is not suited very well for a large body of text. It can be useful though in establishing a visual associating between the  text and other elements right-aligned on the page (click HERE to see example).
  3. Justified – vertically aligned along both its left and right margins. Justified text presents itself in a formal, readable manner. In some cases the use of the justified alignment produces a very narrow or wide spaces between letters. This can be adjusted by using kerning. Very narrow columns of text are not suitable for being justified because the variation in space between the letters is too extreme and happens too often which leads to breaking a visual harmony of the design and reducing the readability. (click HERE to see example).
  4. Centered – the block of text below is centered. Readability is reduced because of the dual rugged edges, so this method of alignment works better with less text and narrow columns:

“Ball tip shank beef, strip steak sausage drumstick turkey ham filet mignon. Chuck boudin capicola ribeye ball tip, frankfurter pig pastrami spare ribs prosciutto biltong. Salami swine pork, andouille jerky fatback flank pork chop ground round. Jowl frankfurter venison short loin. Sirloin tail drumstick prosciutto, meatloaf ground round frankfurter beef ribs pork loin ball tip pork belly turducken short loin. Meatloaf capicola pastrami t-bone, corned beef beef cow tongue chicken tri-tip. Turducken jowl cow, leberkäse sirloin venison beef ribs pancetta pork belly shank sausage drumstick hamburger.”

AVOID mixing different alignments between headlines and text except in a case of main text being justified:  legibility12

Leading and Letterspacing (kerning):

 Leading – the space beween lines of text measured from one baseline to the next. Leading, like type is measured in points.

this text is set in 12 pt Minion Pro and uses 14.4 pt for leading
this text is set in 12 pt Minion Pro and uses 12 pts for leading

The extra points for leading provide more space between the lines and thus increase readability. Leading also can be used in maximizing a specific visual effect.

airy effect achieved when leading is maximized:

this text is set in 12 pt Minion Pro and uses 22 pts for leading

tightly-packed effect can be achieved with negative leading (meaning the leading size is smaller than font size):

this text is set in 12 pt Minion Pro all caps and uses 10 pts for leading

Letterspacing (kerning) – the space between the letters in a word or a passage of text.

  • If text is justified the spaces between letters and words are automatically modified in order for each line of space to fill columns evenly.
  • If text is set to flush left or right, by default the word and letter spacing is set to the the same degree regardless of the fullness of the each line of text.

When working with headlines, for example, the spaces between the letters are often adjusted manually, which affects a flow, look and legibility of the type within the publication:

the headline is set in Minion Pro medium in 19 pt with 70 pt kerning to fill the line of the main text

Furthermore, when it comes to pairing headlines with the main text there are many font and placement options worth considering: they can be large or small; float above, be placed within the main text or sit alongside of the areas of the text; run vertically alongside of the text, etc.

large all caps headline in sans-serif font
large sentence case headline in sans-serif font
small italic font headline flowing some distance from the text creates a light and airy affect on the page
large headline runs along the side of the main text while a subhead is placed at the top of the main text; this treatment is very effective when laying out a multi-page publication with many chapters and subheads within them
Novelty font headline inserted into main text using text-wrap
this method works better when the text is not broken into paragraths
slanted baseline headline with letters going off the page and text aligned along the right edge of the last word
similar alignment with straight baseline
headline with various typefaces set at negative leading; notice the reduced readibility

 


Resources: