Typography


Screen shot 2011-09-01 at 1.30.37 PM.pngImage source: Flickr.

The following BBC radio program "From Arial to Wide Latin" has been modified from a podcast to a video format to help you understand the meaning of fonts and how they are used and understood.

Video Link.
 



Fonts have personalities and deliver an important part of your message. If your font choice is incongruous with your message, the message will lose some of its credibility and might be confusing or hard to interpret. Furthermore, some fonts, even popular ones, have undesirable reputations and should be avoided. For example, Comic Sans makes the top ten of almost every worst font list.

badfonts.png

To choose the right font, it's best to learn about all the wrong ones. Like choosing a mate, getting to know a lot of font types before making your decision will increase your chances of finding the right one. If you are branding your company or your professional identity, consider holding true to one font style.

Image source: Flickr, Graffiti Sextet 1, 2003.

 








ransom note.png

In any one document, limit yourself to two font styles: more than two will distract your audience. Ultimately, in order to make the right font choice, you need to know the various arguments each font makes.

Image source: Flickr, then put them in a duffle bag, 2008


 





i shot serif.png

Font choice is far more complex than making the simple choice between serif and sans serif font styles. More importantly, once you know the general rules, you might want to challenge them.

Image source: Flickr, I Shot the Serif, 2009

 
















Choosing Font Families and Styles   

In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families.


Generic Font Families:

  • Serif
  • Sans serif
  • Cursive
  • Fantasy
  • Monospace

 

Generic Fonts:

  • Times New Roman
  • Roman
  • Arial
  • Garamond
  • Palatino
  • Antiqua
  • Minion
  • Helvetica
  • Swiss
  • Impace
  • Script
  • Decorative
  • Blacklettre
  • Fraktur
  • Comic sans
  • Modern
  • Courier
  • Caliri
  • Verdana
  • Frosty
  • Georgia
  • Avqest
  • Monospace

 

Font Properties

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

Choosing Fonts for PRINT TEXTS

Use sans serif fonts for print document headings and titles.

Use serif fonts for print document texts; however, this is a basic rule that can be broken for rhetorical effect. In addition, the text font size should vary in your document to indicate hierarchy and guide the reader. The following font sizes are general guidelines:

Titles                       20 to 24 point range

Headings              16 to 18 point range

Subheadings        14 to 16 point range

Text                        10 to 12 point range

 

 

 

Choosing Fonts for DIGITAL TEXTS

Use serif or sans serif fonts for electronic document headings and titles. Use sans serif fonts for electronic text.    Once again, this is a basic rule. In terms of the particulars, font size can also be influenced by font choice.  Ralph Wilson's font study showed that "if you use 12pt or larger font online you should use Arial. If you use 10pt or smaller, you should use Verdana."

 

General Font Guidelines

As a general rule, avoid using default font styles. Choosing your font styles will personalize your message and enhance the overall impression of your document.

 Screen shot 2011-09-02 at 1.10.33 AM.png

Font Vocabulary

Kerning involves proportional spacing between type letters and consists of the tightening or loosening of space between letters to create a visually appealing flow to the text.

Leading is the amount of space added between the lines of text that make it legible. A good rule is to set the leading 2-5 points larger than the type face.

Letterspacing is adjusting the average distance between letters in a block of text to fit more or less text into the given space or to improve legibility.

Sans Serif fonts are smooth and modern, clean ends without embellishment. This font style is the most reliable font choice for the web.

Serif  fonts have embellishments or what is sometimes called tails on the end points of the fonts that lead the reader to the next letter.

 

Take the following online survey hosted by Typophile to gain a fuller understanding of font styles and their impact. The posted survey results are here.

What font are you?

 

Visit the Smashing Magazine website to see examples of typography at work.

 

One factor that you should consider when you choose a font is if it will look the same on the end user's screen. Discover what are the safest or most common fonts to choose for most browsers and operating systems at Code Style's website.

Font Links

A Tutorial for Good Typography

Ten Most Common Typography Mistakes

Ten Additional Typography Mistakes

Top Ten Worst Font Choices

Fun Font Games

W3C Font Recommendations

 

End Note

Font mistakes can be disastrous:

 Screen shot 2011-09-02 at 1.00.53 AM.png

 

 

 Screen shot 2011-09-02 at 8.21.41 PM.png

Image source: Flickr.




Leave a comment



yeehaw.jpg