How to Use Fonts Correctly for Sunnyvale Businesses
As we move forward with adding web-based communication methods to traditional print-based ones, it becomes clear that modifications to existing standards for print are needed.
This is particularly true of typography since conditions for the web are quite different than for print.
A brief history of typography
Typography today is the result of Johann Gutenberg’s use of movable type in the mid-1400s. He was the first European to use individual letters, numbers and spaces to assemble into words, sentences and pages that could be disassembled and used again. Movable type, combined with Gutenberg’s invention of oil-based ink and modification of agricultural presses for printing, became the basis for printing for centuries.
The process of manufacturing movable type in metal was continually improved and eventually fostered a true art form – the creation of alphabets, numerals and characters in a single size, weight and style (called a font) with distinctive characteristics, artistically rendered and mathematically balanced. Movable type progressed from crafting fonts individually to cutting matrices and casting the fonts with hot metal
to compositing machines with molten lead vats that created whole lines of type on-the-fly (hot type). Eventually typecasting yielded to computerization – first as phototypesetting and later as desktop publishing.
As with many things, today’s designer who understands the basics of typography will find it easier to make decisions about how best to arrange type on both the printed page and a web page. Let’s begin with the definition of a font. Although font and typeface are used interchangeably
, the actual definition of a font is an alphabet (defined as upper and lower case letters, numerals, punctuation marks and symbols) in a single size, weight and style. A typeface is a family of fonts representing various sizes, weights and styles.
- Font size is the height of the alphabet and is measured in points (print) or ems (web).
- Font weight such as medium, bold, light or black, is the thickness of the alphabet relative to its hight.
- Font style is the slant of the letters. Upright letters are known as roman; slanted is called italics or oblique.
Font classifications are groupings of fonts according to shared characteristics. Typography for print uses these main classifications: Roman, Blackletter and Gaelic
. The Roman classification – which predominates today – is further divided into serif, sans serif, script and ornamental.
Print Typography Classifications
- Serif typefaces have finishing strokes and stems on individual characters. Serif typefaces you may be familiar with include Times, Garamond, Palatino, Bodoni, Bookman.
- Sans serif typefaces lack finishing strokes and are relatively modern. Helvetica, Univers, Futura, Avant Garde, Gill Sans are all sans serif typefaces.
- Script typefaces mimic calligraphy or handwriting and are either formal or casual. Formal script examples are Snell Roundhand and Old English; casual script includes Brush Script and Mistral.
- Ornamental typefaces (also known as display or novelty type) have limited use as headlines or for decorative purposes.
Web typography uses a slightly different classification system.
Web typography classifications
- Sans Serif
Beginning in the mid-1970s, computers began to generate fonts. Early digital type used scaling to change the size, weight and style of fonts which often meant losing the elegance and proportion of hand-created fonts. Eventually font metrics – complex mathematical formulas describing curves, angles, word and letter spacing, space expansion and compression – were developed, resulting in better scaling and rules for forming kerning pairs, ligatures, connecting script letters and other refinements. Digital typography has also allowed the creation of fonts composed of symbols
, pictographs and other ornaments that never existed in mechanical typography.
Text is a major component of any page layout, whether for print or web. How text is organized and integrated with other elements (photographs, illustrations, graphics) determines reader interest,
comprehension and ultimately the impact of the page on the reader. Thus typography is an essential element of design,
and standards for use of typography provide a basis to guide design choices. Typography standards include the selection and use of fonts, white space, punctuation marks and symbols.
Selecting and Using Fonts
The choice of fonts is dictated by the page’s purpose, the amount of text, the intended audience, and characteristics of the font itself. Use these standards for selecting and using fonts:
- For readability on a text-heavy printed page, use a serif font. (Most books, newspapers and magazines use serif type for body copy.) For readability on a web page, use a sans serif font. The text will look cleaner, and sans serif fonts render better in smaller point sizes in the low resolution of computer monitors.
- Limit the number of serif and sans serif fonts to no more than three. In general, the longer the document, the more fonts that can be used. For a single-page or short document, use only one or two fonts. Use only one script or ornamental font, regardless of the number of pages.
- Be consistent by using the same fonts throughout the document or web site. For variety, change the size or weight of the type, not the font.
- For contrast, use a sans serif font for headlines when using a serif font for body copy, and vice versa. It is generally accepted that sans serif fonts are best for text on web pages.
- For emphasis as well as contrast, use bold or italic type.
- Except for acronyms and abbreviations, avoid using all capital letters for text. In printed documents, all caps slows down reading speed; on the web, all caps is synonymous with shouting.
- Never use all caps in a script font – the letters won’t connect as they would in handwriting or calligraphy and the words will be very difficult to read.
White space is the part of a page that is empty of text,
photos or graphic elements. Sometimes called negative space, it separates the design elements and creates “breathing room” on the page. If a page looks crowded, it probably needs more white space. Many readers associate white space with an upscale or sophisticated look.
Page layout elements – page margins, line length and column width – affect white space. So does character spacing, word spacing, line spacing and paragraph indents within the text itself. In general, web pages look better and are easier to read when there is additional white space between lines.
Punctuation Marks and Symbols
A typography alphabet includes punctuation marks and symbols
that are compatible with the font and will therefore produce better-looking text. Learn what they are and how to use them properly and you will produce much more professional looking text.
Become familiar with symbols such as trademark (™), copyright and registered copyright (© ®), degree (°) and fractions (¼, ½, ¾).
- Hyphens (-), en dashes (–), and em dashes (—) are used to separate characters. Each has a specific use. A hyphen is used to hyphenate words and separate characters in a phone number. An en dash shows duration of range (such as 76-100 or April 1–April 30. An em dash is used in place of single or double hyphens to indicate a parenthetical phrase or to set apart clauses in a sentence. En and em dashes are part of the character set of the font.
- Single (‘’) and double (“ ”) quotation marks are used to indicate conversation, word-for-word remarks, or a non-traditional use of a word. Use double quotes to enclose the entire sentence, phase or word, and single quotes for a quotation within a quotation. Quotation marks are part of the font character set.
- An ellipsis (…) indicates an interruption or an unfinished thought. Use the ellipsis character rather than three periods, since the spacing between the dots in an ellipsis is narrower than a period followed by a space.
Typography is about the details
Whether in print or on the web, the goal of good typography is the same: to put the reader at ease, thereby enhancing his understanding and ability to learn from the text
. Pay attention to the details and you will make typography work for you.