Typography Deconstructed

(1)

(2)

(3)

TYPOGRAPHY DECONSTRUCTED SYDNEY GOLDSTEIN

UNIVERSITY OF KANSAS SPRING 2013

(4)

(5)

54 58 60 64 68 70 80 88 100 108 116 COLUMN WIDTH LEADING KERNING ALIGNMENTS HYPHENATION RULES JUSTIFICATION COMBINING TYPEFACES PARAGRAPH BREAKS

HEADERS, SUBHEADS & CROSSHEADS CAPTIONS & NOTES

(6)

(7)

RULES DEFINED

A LIST OF TWENTY-SEVEN RULES EVERY TYPE DESIGNER NEEDS TO LIVE AND BREATHE

1.

2.

3.

4.

INSERT ONLY A SINGLE SPACE AFTER ALL PUNCTUATION Inserting two spaces after a period was common when using a typewriter. Monospace typefaces were designed to occupy the same amount of space no matter the width of the char-acter. Therefore, two spaces were needed to identify the end of a sentence and the beginning of another sentence. With the introduction of the Mac and digital type, characters are designed proportionately, which allows for the correct practice of using one space after all punctuation.

USE PROPER ‘EM’ DASHES, ‘EN’ DASHES, AND HYPHENS An em is a unit of measure equal to the point size that you are using. An em dash is a type of punctuation used to offset clauses in a sentence or to indicate an abrupt change in thought. An en dash is equal to half the length of an em dash. En dashes are used to denote duration.

USE PROPER QUOTE AND APOSTROPHE MARKS

Use true quotation marks and apostrophes instead of using inch marks and feet marks. Place all punctuations inside the quotation marks.

USE TRUE SMALL CAPS

When setting text that contains acronyms, select a typeface with small caps as a family. Selecting small caps from the style menus is not a good choice because the computer reduces the overall size of the type by 80%. This changes the stroke weight and the feel of the font. Expert sets in the Adobe Type Library have small caps options.

(8)

5.

6.

7.

8.

ADD LETTER SPACING TO CAPITALIZED TEXT AND SMALL CAPS Letterspacing is the amount of space between characters in a word. Some software programs caller letterspacing tracking. Use positive number values (to about 2 or 3) to open up letterspacing to capitalized text and small caps, except when periods are used between characters.

USE OLD STYLE FIGURES WHEN APPROPRIATE

Old style figures, also known as non-lining figures do not line up on the baseline as regular or lining numerals do. They can be found in various fonts. If the body text has a significant amount of numbers, research a font family where they are included. If non-lining numerals are not available, use a smaller point size for the lining numbers. Think of lining numbers as upper case numbers and non-lining numbers as lower case numbers.

USE CAPS PROPERLY

With options given to you by almost any type family (bold, point size, etc) you will seldom need to use all caps to draw attention to your text. Not all typefaces are legible when set in all caps; esp. True for script and decorative typefaces. Short headlines may be the once exception to this rule.

USE COPYRIGHT, REGISTER, AND TRADEMARK MARKS PROPERLY The copyright, register, and trademark characters need to be reduced to work with body text. At times, depending on the typeface, you may need to reduce the mark somewhere between 50% and 70%. The goal is to match the x-height. The copyright mark should be approximately 70% of the surrounding text. Unlike the ™ symbol, the © should NOT be super scripted and should remain on the baseline. The ™ symbol is usually superscripted for the chosen font. ™ and ® are also normally set higher then other marks. If you choose to superscript ®, reduce it to about 60% of the size.

(9)

9. 10. 11. 12. 13. ELLIPSIS CHARACTER

Use the ellipsis character and NOT three periods. You can access the ellipsis by typing Option + : (colon). To allow a small amount of space before and after text. However if there is no over crowding the text, leave no space at all.

AVOID UNDERLINED TEXT

This was useful back in the days of the typewriter to draw attention to the text. With digital type and their families, you should not need to use underlined text.

INCREASE LINE SPACING TO IMPROVE THE READABILITY IN YOUR BODY TEXT

Line spacing (aka leading) refers to the space between lines of text. It is important for readability and appearance. Leading is measured from baseline to baseline. As a rule of thumb, allow leading that is 120% of the point size. For sans serif, you may need 130% or more.

BODY COPY SIZE

Body text is set anywhere from 9-12 points. When you print text, it is usually larger than what it looked like on the screen. So, print out your text before finalizing your layout. Try type studies to will help you determine the proper size before you proceed with your layout.

ALTERING FONTS

Don’t alter the original typeface by stretching or condensing the letters improperly. Certain type families should provide you with a lot of flexibility, so you won't not need to destroy or alter text.

SOLID LEADING NEGATIVE LEADING

12/12 pt 12/10 pt

(10)

14. 15. 16. 17. 18. LEGIBILITY OF FONTS

Sans serif typefaces work well for headlines and to set text that is aligned to vertical/horizontal lines. Certain sans serif typefaces which are not very geometrical work well for body copy (i.e. Frutiger, Meta, Scala Sans, etc.)

DECREASE LINE LENGTH AND INCREASE MARGINS

Line length is a measure of text on one line. Any measure between 45 and 75 characters is comfortable for single column widths. The ideal measure for body text length is about 66 characters (counting both letters, punctuation, and spaces.) For more than one column, a measure between 40 and 50 characters is ideal.

AVOID LETTERSPACING LOWERCASE BODY COPY

Don’t letterspace body copy as it really hampers the legibility. Use letterspacing when working with caps. small caps, numbers and display text, looser type spacing may increase the legibility.

WORD SPACING SHOULD BE FAIRLY CLOSE

Text meant for extended reading, the amount of space between words in a paragraph needs to be fairly close–about the width of a lowercase “i.” If the word spacing is too close, it appears as one giant word and legibility is decreased. Try keeping the spaces between words fairly thin and consistent

IDEAL COLUMN WIDTH

For single-column pages, 4.25 inches is ideal. For two-column width, columns can be as narrow as 2 inches. Turning on the hyphenation feature can improve word spacing.

(11)

EXAMPLE

ELE-GANTLY RIGHT!

ELEGANT-LY WRONG! 19. 20. 21. 22. JUSTIFICATION OF TEXT

Justification can be appropriate in certain places. However, it can create certain problems such as rivers and word spacing. Adjusting size of margins, decreasing body copy size, turning on auto hyphenatation and manually hyphenating the text are all examples of possible solutions.

CHOOSE THE ALIGNMENT THAT FITS

Make sure the alignment chosen for all areas of text are legible and consistent with the design and guidelines. Left aligned text is easier to read and set. Justified text is harder to set with out inevitable word spacing problems. Right aligned and centered are generally not used for body copy.

RULES OF HYPHENATION

Don’t rely on the software to judge where hyphens should be placed. At the end of lines, it is best to leave at least two characters behind and take at least three forward. Avoid leaving the stub end of a hyphenated word or any word shorter then four letters as the last line of a paragraph Try to avoid more then three consecutive hyphenated lines. Don't hyphenate or break proper names and titles. Creating a non-breaking space before and after the name will ensure that the name will not break.

AVOID BEGINNING THREE CONSECUTIVE LINES WITH THE SAME WORD

Since software programs deal with line breaks automatically based upon a number of variables, it is possible to have paragraphs with consecutive lines beginning with the same word. When this happens simply adjust the text to avoid/fix the problem.

(12)

A. USE SPELL CHECK OPTION THAT COMES WITH THE SOFTWARE YOU ARE USING FOR THE PROJECT.

B. PRINT THE DOCUMENT AND READ IT. THE MONITOR AND DESIGN OF THE DOCUMENT WILL MAKE TEXT LOOK PERFECT WHEN IT MAY NOT BE. EVEN IF TEXT IS GIVEN TO YOU BY A CLIENT, CHECK IT. NEVER EVER ASSUME THAT IT IS CORRECT. KEEP A DICTIONARY CLOSE BY AS WELL. 23. 24. ALWAYS SPELL CHECK!

Spell check is an application program that flags words in a document that may not be spelled correctly. Spell checkers may be stand-alone, capable of operating on a block of text, or as part of a larger application.

Once you are finished with your design, spell check the text using both of the following:

DON'T RELY SOLELY ON SPELL CHECK! IT'S NOT PERFECT.

(13)

24.

25.

26.

27.

AVOID WIDOWS AND ORPHANS

Widows are either single words alone on a line or single sen-tences alone on a new page. Orphans are single lines of copy alone at the end of a page.

KERNING IN HEADLINES

Adjust the space between two particular letters to allow for more consistent negative space.

INDENTS

In continuous text, mark all paragraphs after the first with an indent of at least one “em”. Do NOT use three spaces but rather use the tabs or indents option in your software.

ITEMS IN A SERIES

Items in a series do not use a comma before the word “and.” (i.e., ‘peaches, apples and oranges.’)

(14)

MARKS

At times, depending on the typeface, you may need to or be asked to reduce the mark between 50% and 70%. The goal is to match the x-height. The copyright mark should be approximately 70% of the surrounding text. Unlike the ™ symbol, the © should NOT be superscripted and should remain on the baseline. ™ is usually superscripted for the chosen font. ™ and ® are normally set higher then some of the other marks.

THE COPYRIGHT, REGISTER, AND TRADEMARK CHARACTERS NEED TO BE REDUCED TO WORK WITH BODY TEXT.

(15)

“ ” ‘ ’ – — … • FI FL © ™ ° ¢ € ⁄ ¡ ¿ £ Ç Ç

OPENING DOUBLE QUOTE CLOSING DOUBLE QUOTE OPENING SINGLE QUOTE CLOSING SINGLE QUOTE EN DASH EM DASH ELLIPSIS BULLET LIGATURE OF F AND I LIGATURE OF F AND L COPYRIGHT TRADEMARK DEGREE SYMBOL CENT SYMBOL EURO SYMBOL FRACTION BAR UPSIDE DOWN ! UPSIDE DOWN ? POUND SYMBOL CEDILLA CAPITAL CEDILLA Option + [ Option + Shift + [ Option + ] Option + Shift + ] Option + Hyphen Option + Shift + Hyphen Option + ; Option + 8 Option + Shift + 5 Option + Shift + 6 Option + G Option + 2 Option + Shift + 8 Option + $ Option + Shift + 2 Option + Shift + 1 Option + 1 Option + Shift + ? Option + 3 Option + c Option + Shift + C

ELLIPSIS CHARACTER

Use the ellipsis character and NOT three periods. You can access the ellipsis by typing Option + : (colon). Allow a small amount of space before and after. However if it is not crowding the text, leave no space at all.

(16)

(17)

GRID STUCTURES

A grid subdivides a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multi-page documents, making the design process quicker, and ensuring visual consistency between related pages.

At its most basic, the sizes of a grid’s component parts are determined by ease of reading and handling. From the sizes of type to the overall page or sheet size, decision-making is derived from physiology and the psychology of perception as much as by aesthetics. Type sizes are generally determined by the hierarchy— captions smaller than body text and so on—column widths by the optimum word counts of eight to ten words to the line, and overall layout by the need to group related items. This all sounds rather formulaic, and easy. But designers whose grids produce dynamic or very subtle results take these rules as a starting point only, developing flexible structures in which their sensibility can flourish.

Grids often need to be designed to give more flexibility than the single column of text per page (Jan Tschichold's grid). This is due to to a change in our reading patterns. Grid structures have to accommodate a greater variety of material such as photographs, illustrations, headings, captions, references, charts; they need to be more complicated than a grid using only text and may utilize more modules. The design of the grid had to be relevant to the purpose.

THE GRID PROVIDES A FRAMEWORK WHERE TEXT, IMAGE AND SPACE CAN BE COMBINED INTO A COHESIVE MANNER

COLUMNS

Columns are vertical bands of modules. There can be any number of columns in a grid. More columns leads to more flexibility, but can also make the grid difficult to work with.

MODULES

Modules are individual units of space that are separated by regular intervals. Modules are the basic building blocks of grids. When repeated they create columns and rows.

(18)

THIS BASE OF LAYOUTS

Modular grids are created by positioning horizontal guidelines in relation to a base-line grid that governs the whole document. Basebase-line grids serve to anchor all (or nearly all) layout elements to a common rhythm. Create a baseline grid by choosing the typesize and leading of your text, such as 10-pt Scala Pro with 12 pts leading (10/12). Avoid auto leading so that you can work with whole numbers that multiply and divide cleanly. Use this line space increment to set the baseline grid in your document preferences.

Adjust the top or bottom page margin to absorb any space left over by the baseline grid. Determine the number of horizontal page units in relation to the numer of lines in your baseline grid. Count how many lines fit in a full column of text and then choose a number that divides evenly into the line count to create horizontal page divisions. A column with forty-two lines of text divides neatly into seven horizontal modules with six lines each. If your line count is not neatly divisible, adjust the top and/or bottom page margins to absorb the leftover lines.

BASELINE GRID

GRID SPECS: LEADING: 12 PTS

FONT SIZE: 10 PTS

(19)

SYMMETRICAL GRID

Symmetric grids sit centrally on a single page so that the left and right margins are equal. the term can also be applied to a grid system used across facing pages where the position of the margins and text areas are symmetrically reflected or mirrored. Margins are not necessarily equal but run both left and right of the text area on single pages and are mirrored across the spread.

(20)

THE GOLDEN SPIRAL

This example shows a grid where the proportions of the text area are established from the shape of the page, i.e. the height of the text area is the same as the width of the full page. Note that the text are will always remain the same, regardless of the scale of the page.

Grids often need to be designed to give more flexibility than the single column of text per peg This is due to a change in our reading patterns. Although we still read consecutively , our attention is drawn to both magazines and coffee table books which are often larger in format and highly illustrated. The grid structures for these formats have to accommodate a greater variety of material such as photographs, illustrations, headings, captions, references, charts; they need to be more compli-cated than those for a grid using only text and may utilize some more modules. Therefore, the design of the rid has to be relevant to its purpose.

The golden section has been used for centuries. The Greeks used the golden section to establish balance in the design for architecture, for example the Parthenon, and it was re-discovered by artists and architects during the Renaissance period. The golden section is constructed through mathematical calculations : the ratio being 1:1:61803.

The Fibonacci sequence is a mathematical series discovered in the 12th century by Leonardo Fibonacci and is used to establish proportion. The sequence of numbers demonstrate that the sum of two numbers establishes the next number.

(21)

RECTANGLES FIBONACCI SEQUENCE PROPORTIONS 3:5 - 5:8 - 8:13 - 13:21 - 21:34 - 34:55 - 55:89 - 89:144 - 144:233 - 233:377 - 377:610 3 - 5 - 8 - 13 - 21 - 34 - 55 - 89 - 144 - 233- 377 - 610 1:1.667 1:1.618

(22)

THE MORE COLUMNS YOU CREATE THE MORE FLEXIBLE YOUR GRID BECOMES These may consist of simply of a number of vertical columns used to position text and image matter and may include the space between columns- the gutters- and the margins of the page, which must be given consideration. It may be necessary to produce grids with narrower sub columns to enable a greater degree of flexibility in the design and layout of pages. Text widths can be set to multiples of the narrower columns, allowing the design to accommodate different matter thus allowing for a change of pace, rhythm and style from one page or section to the next, while still relating the content.

(23)

GREAT FOR DIVIDING SPACE

Modular grids are associated with Swiss typography or the 'International style' of the 1950's and 60s. As well as a vertical division of space, modular grids divide space hormonally too, creating units or cells. The depth of the cell may depend upon the size of the text type and leading being used. Multiples of the line depth (leading size) form a good basis on which to construct the cells.

Use a modular grid to arrange a text in as many ways as you can. By employing just one size of type and flush left alignment only, you will construct a typographic hierarchy exclusively by means of spatial arrangement. To make the project more complex, begin adding variables such as weight, size, and alignment.

(24)

OFF-CENTERED GRIDS

These grids may have an off-center appearance either as single pages or combined in spreads. If used in spreads, the grid is not mirrored from one page to the next as in symmetrical grids, but is more likely to appear repeated in a single position from page to page. Again, as with all grid systems, attention to the relationship of the margins is important, It can be this element alone that determine the success of the eventual layout.

(25)

(26)

(27)

(28)

(29)

QUOTES

Use real quotation marks – never those grotesque generic marks that actually sym-bolize ditto/inch or foot marks: use “and” – not “and”. Most software applications will convert the typewriter quotes to the real quotes for you automatically as you type. Check the preferences for your application – you’ll find a check box to tell your application to automatically set something like “TYPOGRAPHER’S QUOTES,” “SMART QUOTES,” or “CURLY QUOTES.” Then as you type using the standard ditto key (“), the software will set the correct quotation marks for you.

It is necessary to know how to set smart quotes/real quotes yourself because some-times the software doesn’t do it or does it wrong.

BRIDGE CLEARANCE:

16'7"

THE YOUNG MAN STOOD:

6'2"

THE LENGTH OF THE WALL IS:

153'9"

OPENING SINGLE QUOTE:

CLOSING SINGLE QUOTE:

‘ TYPE: OPTION + ] ’ TYPE: OPTION + SHIFT + ]

USE TRUE QUOTATION MARKS AND APOSTROPHES INSTEAD OF USING INCH MARKS AND FEET MARKS. PLACE ALL PUNCTUATIONS INSIDE THE QUOTATION MARKS.

(30)

(31)

PEOPLE OFTEN ARE CONFUSED ABOUT WHERE THE APOSTROPHE BELONGS. THERE ARE A COUPLE OF RULES THAT WORK VERY WELL: APOSTROPHE: OPTION + SHIFT + ]

APOSTROPHE

POSSESSIVES:

Turn the phrase around. The apostrophe will be placed after whatever word you end up with. For example, in the phrase the boys’ camp, to know where to place the apostrophe say to yourself, “The camp belongs to the boys.” The phrase the boy’s camp says “The camp belongs to the boy.”

“The big exception to this is “its.” “Its” used as a possessive never has an apostrophe! The word it only has an apostrophe as a contraction — “it’s” always means “it is” or “it has.” It may be easier to remember if you recall that yours, hers, and his don’t use apostrophes — and neither should its.

CONTRACTIONS

The apostrophe replaces the missing letter. For example: you're always means you are; the apostrophe is replacing the a from are. That’s an easy way to distinguish it from your as in your house and to make sure you don’t say: Your going to the store.

As previously noted, it’s means “it is”; the apostrophe is indicating where the i is left out. Don’t means “do not”; the apostrophe is indicating where the o is left out.

OMISSION OF LETTERS

In a phrase such as Rock ’n’ Roll, there should be an apostro-phe before and after the n, because the a and the d are both left out. And don’t turn the first apostrophe around — just because it appears in front of the letter does not mean you need to use the opposite single quote. An apostrophe is still the appropriate mark (not ‘n’).

In a phrase such as House o’ Fashion, the apostrophe takes the place of the f. There is no earthly reason for an apostrophe to be set before the o.

In a phrase such as Gone Fishin’ the same pattern is followed, the g is missing.

(32)

USE PROPER ‘EM’ DASHES, ‘EN’ DASHES, AND HYPHENS. NEVER USE TWO HYPHENS INSTEAD OF A DASH.

DASHES

Everyone knows what a hyphens is —that tiny little dash that belongs in some words, like mother-in-law, or in phone numbers. It’s also used to break a word at the end of a line, of course.

You might have been taught to use or given text that uses a double hyphen -- to indicate a dash. This is a typewriter convention because typewriters didn’t have the real dash used in professional typesetting. On a Mac, no one needs to use the double hyphen—we have a professional em dash, the long one, such as you see in this sentence. We also have an en dash, which is a little shorter than the em dash.

1.NEVER USE TWO HYPHENS INSTEAD OF A DASH

(33)

OPTION + HYPHEN OPTION + SHIFT + HYPHEN

HYPHEN -

EN DASH –

EM DASH —

A hyphen is one third of the em rule and is used to link words. It serves as a compound modifier where two words become one, such as x-height. A hyphen is also used to break works at syllables in text blocks.

An en dash is half of the em rule (the width of a capital N) and is used be-tween words that indicate a duration, such as time or months or years. Use it where you might otherwise use the word “to.”

In a page layout application, the en dash can be used with a thin space on either side of it. If you want you can kern it so it is not a full space.

The em dash is twice as long as the en dash—it’s about the size of a capital letter M in whatever size and type-face you’re using at the moment. This dash is often used in place of a colon or parentheses, or it might indicate an abrupt change in thought, or it’s used in a spot where a period is too strong and a comma is too weak. It is also used for attribution of text. —Mac is not a Typewriter

Our equivalent on the typewriter was the double hyphen, but now we have a real em dash. Using two hyphens where there should be an em dash makes your look very unprofessional.

When using an—no space is used on either side. MOTHER-IN-LAW X-HEIGHT SANS-SERIF OCTOBER – DECEMBER 4 – 6 YEARS OF AGE 6:30 – 8:45 A.M.

WHEN USING AN —NO SPACE IS USED ON EITHER SIDE

(34)

(35)

SMALL CAPS

Small caps are less intrusive when all uppercase appears within normal text or can be used for special emphasis. Computer programs usually can generate small caps for any typeface, but those are not the same as true small caps. True small caps have line weights that are proportionally correct for the typeface, which mean that they can be used within a body of copy without looking noticeably wrong. When setting text that contains acronyms, select a typeface with small caps as a family. Selecting small caps from the style menus is a poor choice because the com-pute reduces the overall size of the type by 80%. This changes the stroke weight and the feel of the font. Expert sets in the Adobe Type Library have small caps options. Small caps are capital letters that are about the size of normal lowercase letters in a typeface.

T

HIS

I

S

A

N

E

XAMPLE

O

F

AKE

S

MALL

C

APS

This Is An Example Of

True

Small Caps

ACRONYMS

Set acronyms such as NASA or NASDAQ in small caps when they appear in body text or headlines.

ABBREVIATIONS

Set common abbreviations such as AM or PM in small caps so they don’t overpower the accompanying text. Use small caps for A.M. and P.M.; space once after the number, and use periods.

TRUE SMALL CAPS

Avoid simply resizing capital letters or using the small caps feature in some programs. Instead use typefaces that have been specifically created as small caps.

SMALL CAPS ARE UPPERCASE (CAPITAL) LETTERS THAT ARE ABOUT THE SIZE OF NORMAL LOWERCASE LETTERS IN ANY GIVEN TYPEFACE.

(36)

USE SMALL CAPS IN ACRONYMS SUCH AS NBA, NFL, CIA, CNBAM, OR BET

If you set acronyms in regular all caps, their visual presence is unneccessarily over-whelming. Traditionally, “a.m.” and “p.m.” are set with small caps. If you were taught to type on a typewriter (or if you were taught on a keyboard by someone who has taught on a typewriter), you probably learned to set these abbreviations in all caps because there were no small caps on typewriters. But now that you have the capa-bility, you can and should set them properly.

THE CAPITAL LETTERS IN THE MIDDLE OF THE SENTENCE CALL TOO MUCH ATTENTION TO THEMSELVES. NOTICE HOW THE SMALL CAPS BLEND IN WITH THE TEXT. THE CAPITAL LETTERS FOR P.M. ARE MUCH TOO LARGE— THE ABBREVIATION IS NOT THAT IMPORTANT.

NO SMALL CAPS

Harriet, an FBI agent, turned on CNN to get the dirt on the CIA before

going to bed at 9:30 P.M.

SMALL CAPS

Harriet, and

fbi

agent, turned on

cnn

to get the dirt on the

cia

before

(37)

USE SMALL CAPS IN ACRONYMS SUCH AS NBA, NFL, CIA, CNBAM, OR BET

There are quite a few font families that include “true-drawn” small caps—letter forms that have been redesigned to match the proportions and thickness of the uppercase. These families are of called EXPERT sets or SMALL CAP SETS. The result is a smooth, uniform, undistrupting tone throughout the text.

I META GUY AND HE WAS ALL LIKE CHOLLA AT YO GURL MRS. EAVES. IT TOOK A CENTURY TO SWIFT HER OFF HER FEET TO BASKERVILLE THOUGH.

The Wicked Are Very Weary

True-drawn small caps

are specially drawn to match the weight of the capital letters in the same face.

Small caps aren’t limited to serif typefaces. Many san-serif include them as well.

Notice that the stroke width appears uniform throughout the text.

TYPEFACES WITH SMALLCAPS:

(38)

(39)

NUMERALS/FIGURES

Oldstyle figures, also known as non-lining figures do not line up on the baseline as reg-ular or lining numerals do. They can be found in various fonts. They are considerably different from the more common “LINING” (or “ALIGNING”) figures which are all-cap height and typically monospaced in text faces so that they line up vertically on charts. Oldstyle figures have more of a traditional, classic look and are very useful and quite beautiful when set within text. They are only available for certain typefaces, some-times as the regular numerals in a font, but more often within a supplementary or expert font. The figures are proportionately spaced, eliminating the white spaces that result from monospaced lining figures, especially around the numeral one.

OLDSTYLE FIGURES ARE A STYLE OF NUMERAL WHICH APPROXIMATE LOWERCASE LETTERFORMS BY HAVING AN X-HEIGHT AND VARYING ASCENDERS AND DESCENDERS.

OLDSTYLE FIGURES BLEND

Old style figures blend in without disturbing the color of the body copy. They also work well in headlines since they’re not as intru-sive as lining figures. In fact, many people prefer them overall for most uses except charts tables. It’s well worth the extra effort to track down and obtain typefaces with oldstyle figures; the fonts that contain them might well become some of your favorites.

BODY TEXT

If the body text has a significant amount of numbers, research a font family where they are included. If non-lining numerals are not available, use a slightly smaller point size for the lining numbers. Think of lining numbers as upper case numbers and non-lining numbers as lower case numbers.

Dear John, please call me at 438-9762 at 3:00 to discuss

marriage. Or write to me at Route 916, zip code 87505

NOTICE HOW BEAUTIFULLY THESE NUMBERS BLEND IN WITH THE TEXT

(40)

SANS SERIF OLD STYLE NUMBERS 12 134 17 1023 323 12.5 134.0 17.8 1023.4 323.0 12 134 17 1023 323 12.5 134.0 17.8 1023.4 323.0 12 134 17 1023 323 12.5 134.0 17.8 1023.4 323.0 WALBAUM PALATINO SABON

SANS SERIF OLD STYLE NUMBERS

12 134 17 1023 323 12.5 134.0 17.8 1023.4 323.0 12 134 17 1023 323 12.5 134.0 17.8 1023.4 323.0 12 134 17 1023 323 12.5 134.0 17.8 1023.4 323.0 SCALA SANS CHOLLA META

(41)

(42)

(43)

Someone that wants to read it? Someone that has to read it?

X-HEIGHT

Readability and legibility are two key elements of printed text that typographer strive to maximize. Readability refers to whether an extended amount of text, such as an article, book, or annual report – is easy to read. Legibility refers to whether a short burst of text, such as a headline catalog listing, or stop sign is recognizable. There are several factors that determine whether a text is readable. When decid-ing what typeface should be used for a job, consideration should be given to the font and its x-height. It is important to understand how a block of text can express a message through its texture/color, therefore suiting a particular design solution. Fonts set in the same size, same leading and column width will produce varying degrees of “color”.

In typography, color can also describe the balance between black and white on the page of text. A typeface’s color is determined by stroke width, x-height, character width and serif styles.

AS A DESIGNER, IF YOU ARE ONLY ASKED TO MAKE THE TEXT READABLE ON THE PAGE THE FOLLOWING QUESTIONS SHOULD BE ASKED...

WHO IS TO READ IT?

HOW WILL IT BE READ? Quickly. In passing. Focused. Near. Far.

THE X-HEIGHT REFERS TO THE DISTANCE BETWEEN THE BASELINE AND THE MAIN LINE OF THE TYPEFACE.

(44)

Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and it's glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti’s manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultural, social, and political values and the destruction of such cultural institutions as museums and libraries.

MRS. EAVES

Zuzana Licko

Transitional Serif

Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti’s manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultural, social, and political values and the destruction of such cultural institutions as museums and libraries.

MELIOR

Hermann Zapf

Transitional Serif

x-height: medium

character width:medium

color:average

x-height:small

color:light

(45)

GOUDY

Frederic W. Goudy

Old Style Serif

x-height:medium

color: light

ROTIS SERIF

Otl Aicher

New Transitional Serif

x-height:large

character width: narrow

color:average

(46)

MEMPHIS

Rudolf Wolf

Slab Serif

x-height:medium

color:average

Xxhg

GARAMOND

Clause Garamond

Old Style Serif

x-height: small

character width: medium

color:average

(47)

Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti’s

manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultral, social, and political values and the destruction of such cultural institutions as museums and libraries.

VOLTA T

Walter Baum & Konrad Bauer

Modern Serif

x-height:medium

color:light

Xxhg

ARCHER

Hoefler & Frere-Jones

Slab Serif

x-height:medium

color:average

(48)

SWIFT

Gerard Unger

New Transitional Serif

x-height:medium

color: average

Xxhg

BASKERVILLE

John Baskerville

Transitional Serif

x-height:small

character width:narrow

color: average

(49)

UNIVERS

Adrian Frutiger

Neo-Grotesque San Serif

x-height:large

character width: wide

color: average

Xxhg

GOTHAM

Tobias Frere-Jones

Geometric Serif

x-height:large

character width: wide

color: light

(50)

HELVETICA NEUE

Max Miedinger

Neo-Grotesque San Serif

x-height:small

color: average

Xxhg

(51)

Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti’s manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultural, social, and political values and the destruction of such cultural institutions as museums and libraries.

TRADE GOTHIC

Jackson Burke

Grotesque Serif

x-height:large

character width:narrow

color:dark

Xxhg

INTERSTATE

Tobias Frere-Jones

Humanistic Sans Serif

x-height:large

color:average

(52)

SYNTAX

Hans Eduard Meirer

x-height:large

color: dark

Xxhg

AKZIDENZ GROTESK

Gunter Gerhard Lange

Transitional Serif

x-height: medium

color:average

(53)

Futurism was first announced on February 20, 1909, when the Paris newspaper Le Figaro published a manifesto by the Italian poet and editor Filippo Tommaso Marinetti. The name Futurism, coined by Marinetti, reflected his emphasis on discarding what he conceived to be the static and irrelevant art of the past and celebrating change, originality, and innovation in culture and society. Futurism rejected traditions and glorified contemporary life, mainly by emphasizing two dominant themes, the machine and its motion. The works were characterized by the depiction of several successive actions of a subject at the same time. Marinetti’s manifesto glorified the new technology of the automobile and the beauty of its speed, power, and movement. He exalted violence and conflict and called for the sweeping repudiation of traditional cultural, social, and the political values and the destruction of such cultural institutions as museums and libraries.

SCALA SANS

Martin Majoor

x-height: medium

color: light

Xxhg

EUROSTILE

Aldo Novarese

Geometric Sans Serif

x-height:large

color:light

(54)

(55)

(56)

(57)

COLUMN WIDTH

Columns are most commonly used to break up large bodies of text that cannot fit in a single block of text on a page. Additionally, columns are used to improve page composition and readability. Newspapers very frequently use complex multicolumn layouts to break up stories and longer bodies of texts within a story. Column can also generally refer to the vertical delineations created by a typographic grid system which type and image may be positioned.

A COLUMN IS ONE OR MORE VERTICAL BLOCKS OF CONTENT POSITIONED ON A PAGE, SEPARATED BY GUTTERS OR RULES.

SEVERAL FACTORS TO CONSIDER WHEN DETERMINING THE WIDTH OF A COLUMN OF TEXT ARE:

TYPEFACE

The width of the individual glyphs and the overall typeface design affect the word count per line.

POINT SIZE

The size of the type affects how many words fit in a line.

WORD LENGTH

You can fit a greater number of shorter words than longer ones in a given column width.

THE NASTA TEXTBOOK STANDARD CALLS FOR THE FOLLOWING MINIMAL ALLOWABLE MARGINS:

(58)

The final factor to take into account when deciding upon the appropri-ate line length is the nature of the actual text.

The final factor to take into account when deciding upon the appropriate line length is the nature of the ac-tual text. For instance, some content, such as medical text – might involve many longer words, lending itself to a wider column width to avoid excessive

The final factor to take into account when deciding upon the appropriate line length is the nature of the actual text. For instance, some content – such as medical text – might involve many longer words, lending itself to a wider column width to avoid excessive hyphenations. On the other hand, text used for children and younger readers might involve many short words, allowing for a narrow column.

The final factor to take into account when deciding upon the appropriate line length is the nature of the actual text. For in-stance, some content – such as medical text – might involve many longer words, lending itself to a wider column width to avoid excessive hyphenations. On the other hand, text used for children and younger readers might involve many short words, allow-ing for a narrow column.

WHICH DO YOU PREFER?

TOO NARROW JUST RIGHT JUST RIGHT

TOO WIDE

COLUMNS VARY DEPENDING ON THE AMOUNT OF TEXT YOU HAVE. WHAT WORKS FOR THING MIGHT NOT WORK FOR ANOTHER.

(59)

(60)

(61)

(62)

(63)

LEADING

LEADING THE SPACE VERTICALLY BETWEEN LINES OF TEXT THE NAME COMES FROM THE PHYSICAL PIECE OF LEAD THAT USE TO BE USED IN MECHANICAL PRINTING TO SEPERATE THE LINES OF TEXT.

There are things now that can be done to type, with aid of computers, that were never intended to be possible by the designers of the older typefaces. Therefore one must know the limita-tions and rules of type before they can properly and effectively break the rules.

NORMAL

12 PT LEADING

NEGATIVE

0 PT LEADING

EXTREME

24 PT LEADING

(64)

(65)

METRIC KERNING

Uses the kerning tables that are built into the typeface. When you select metric kerning in your page layout program, you are using the spacing that was intended by the type designer. Metric kerning usually looks good, especially at small sizes. Cheap novelty fonts often have little or no built-in kerning and will need to be optically kerned.

OPTICAL KERNING

Is executed automatically by the page layout program. Rather than using the pairs addressed in the font’s kerning table, optical kerning assesses the shapes of all characters and adjusts the spacing wherever needed. There are ome graphic designers that apply optical kerning to headlines and metric kerning to text. You can make this process efficient and KERNING IS AN ADJUSTMENT OF THE SPACE BETWEEN TWO LETTERS.

KERNING

The characters of the Latin alphabet emerged over time; they were never designed with mechanical or automated spacing in mind. Thus some letter combinations look awkward without special spacing considerations. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T). In metal type, a kerned letter extends past the lead slug that supports it, allowing two letters to fit more closely together. In digital fonts, the space between letter pairs is controlled by a kerning table created by the type designer, which specifies spaces between problematic letter combinations. Working in a page layout program, a designer can choose to use metric kerning or optical kerning as well as adjusting the space between letters manually where desired. A well-designed typeface requires little or no additional kerning, especially at text sizes.

(66)

TOO MUCH TYPOGRAPHIC TERMS TO PROCESS? MAYBE THIS WILL HELP:

CONFUSED?

X

type

x-height leading baseline kerning

(67)

X-HEIGHT

The height of a font’s main body, not including ascenders or descenders.

LEADING

The space vertically between lines of text, name comes from the physical piece of lead that used to be used in mechanical printing process to separate lines of text.

BASELINE

The line accross the bottom of a font’s x-height, discounting descenders.

KERNING

(68)

(69)

ALIGNMENTS

In unjustified text, the text block is set with normal letter and word spacing. Because if the even word spacing the text will have an even texture – no large spaces between words. The lines will naturally vary in length. A RAGGED TEXT BLOCK can integrate with the layout and add visual interest to the page. The difficulty is making the ragged edge have a pleasing silhouette. When the first line in the text is longer than the second, it becomes separate from the layout and creates a box-like shape. This destroys one of the advantages of unjustified text.

The RAGGED EDGE needs to have a life, but a narrow column can be less active. An-other advantage to ragged text is less hyphenation is needed. Therefore, names, dates or words which are normally read together can stay together.

WHAT’S RIGHT, WHAT’S WRONG

IF THEY ARE BOTH WRONG, THEN WHAT'S RIGHT?!

IF TWO WRONGS DON'T MAKE A RIGHT, WHAT DOES THREE LEFTS MAKE?

(70)

CHARACTERISTICS

Often considered more formal, less friendly than left-aligned text.

Usually allows for more characters per line, packing more into the same amount of space (than the same text set left-aligned).

May require extra attention to word and character spacing and hyphenation to avoid unsightly rivers of white space running through the text.May be more fa-miliar to readers in some types of publications, such as books and newspapers. Some people are naturally drawn to the "neatness" of text that lines up per-fectly on the left and right.

CHARACTERISTICS

Often considered more informal, friendlier than justified text. The ragged right edge adds an element of white space.

May require extra attention to hyphenation to keep right margin from being too ragged.

Generally type set left-aligned is easier to work with (i.e. requires less time, attention, and tweaking from the designer to make it look good).

JUSTIFIED TEXT

LEFT-ALIGNED, RAGGED RIGHT

RAGGED RIGHT REQUIRES LESS TIME, ATTENTION, AND TWEAKING FROM TO MAKE IT LOOK GOOD!

(71)

WHEN IN DOUBT, DON'T CENTER IT.

There is nothing inherently wrong with centered text. As with ragged right or fully-justified text alignment, what works for one design might be totally inappropriate for another layout. There are simply fewer situations where centered text is appropriate. When in doubt, don't center it.

As with all layouts, alignment depends on the purpose of the piece, the audience and its expectations, the fonts, the margins and white space, and other elements on the page. The most appropriate choice is the alignment that works for that particular design.

There will be well-meaning friends, business associates, clients, and others who will question your choices. Be prepared to explain why you chose the alignment you did and be prepared to change it (and make necessary adjustments to keep it looking good) if the person with final approval still insists on something different. CENTERED

NO MATTER WHAT ALIGNMENT YOU USE, REMEMBER TO PAY CLOSE ATTENTION TO HYPHENATION AND WORD/ CHARACTER SPACING AS WELL TO INSURE THAT YOUR TEXT IS AS READABLE AS POSSIBLE.

(72)

(73)

(74)

(75)

HYPHENATION RULES

DON'T RELY ON THE SOFTWARE.

Don’t rely on the software to judge where hyphens should be placed. At the end of lines, leave at least two characters behind and take at least three forward. For example, “ele-gantly” is acceptable, but “elegant-ly” is not because it takes too little of the word to the next line. Avoid leaving the stub end of a hyphenated word or any word shorter then four letters as the last line of a paragraph.

Avoid more then three consecutive hyphenated lines. Avoid hyphenating or break-ing proper names and titles. Creatbreak-ing a non-breakbreak-ing space before and after the name will ensure that the name will not break. Avoid beginning three consecutive lines with the same word. Since software programs deal with line breaks auto-matically based upon a number of variables, it is possible to have paragraphs with consecutive lines beginning with the same word. When this happens simply adjust the text to avoid/fix the problem.

KEEP IN MIND:

HOW THE TEXT IS READ, AVOID WIDOWS

AVOID HYPHENATING OR LINE BRAKES OF NAMES

LEAVE A LEAST 2 CHARACTERS ON THE LINE AND 3 FOLLOWING AVOID BEGINNING CONSECUTIVE LINES WITH THE SAME WORD AVOID ENDING CONSECUTIVE LINES WITH THE SAME WORD AVOID ENDING LINES WITH THE WORDS: THE, OF, AT, A, BY. NEVER HYPHENATE ANY WORDS IN A HEADLINE AND AVOID HYPHENATION IN A CALLOUT

(76)

(77)

Justify text only if the line is long enough to prevent awkward and inconsistent word spacing. The only time you can safely justify text is if your type is small enough and your line is long enough, as in books where the text goes all the way across the page. If your line is shorter, as in newsletter, or if you don't have many words on the line, than as the type aligns to the margins the words space them-selves to accommodate it. It usually looks awkward. You've seen newspaper col-umns where all text is justified, often with a word stretching all the way across the column, or a little word on either side of the column with a big gap in the middle. Gross. But that's what can happen with justified type. When you do it, the effect might not be as radical as the newspaper column, but if your lines are relatively short, you will inevitably end up with uncomfortable gaps in some lines, while other

JUSTIFICATION

LET'S NOT GET AWKWARD...

When checking rivers in justified text, print it out, turn it upside down and squint at it.

OLDSTYLE FIGURES BLEND

Old style figures blend in without disturbing the color of the body copy. They also work well in headlines since they’re not as intrusive as lining figures. In fact, many people prefer them overall for most uses except charts tables. It’s well worth the extra effort to track down and obtain typefaces with oldstyle figures; the fonts that contain them might well become some of your favorites.

(78)

RIVERS

In typography, rivers, or rivers of white, are visually unattractive gaps appearing to run down a paragraph of text. They can occur with any spacing, though they are most noticeable with wide word spaces caused by either full text justification or monospaced fonts.

PLEASE TRY NOT TO DROWN SWIMMING IN THAT RIVER.

(79)

WIDOWS AND ORPHANS

Never leave widows and orphans bereft on the page. Avoid both of these situations. If you have editing privileges, rewrite the copy, or at least add or delete a word or two. Sometimes you can remove spacing from the letters, words, or lines, depending on which program you’re working in. Sometimes widening a margin just a hair will do it. But it must be done. Widows and orphans on a page are wrong.

WIDOWS

ORPHAN

When a paragraph ends and leaves fewer than seven characters (not words, characters) on the last line, that line is called a widow. Worse than leaving one word at the end of a line is leaving part of a word, the other part being paraphrased on the line

above.

When a paragraph ends and leaves fewer than seven characters (not words, characters) on the last line, that line is called a widow. Worse than leaving one word at the end of a line is leaving part of a word, the other part being para-phrased on the line

FOREVER ALONE.

NO CHILD LEFT BEHIND.