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).
Typefaces are further divided into font families that contain variations of that font – regular, bold, italic and others.
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.
Sans-serif – typeface does not have serifs.
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:
Dingbat, Ornament – The keyboard can also be used to place images. Dingbat and ornament fonts are comprised of images, graphic elements, and flourishes:
- 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.
- Audience: older and conservative audience are usually less tolerant of difficult to read fonts than younger and progressively-minded audiences.
- Many factors affect legibility: font choice, size, color, letterspacing, case (upper vs. lower) and the backdrop behind the text.
- 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.
- 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).
- 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).
- 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.
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:
tightly-packed effect can be achieved with negative leading (meaning the leading size is smaller than font size):
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:
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.