A Little Book of Typography

Page 1



What is typography? A brief history Letters Text Document Setup Bibliography



typography /noun/ 1. the work of setting and arranging types and of printing from them. 2. the general character or appearance of printed matter. 3. the art or process of printing with type.



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.



“Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”
 ~ El Lizzitsky


Every designer, whether you’re in print or web, should possess a basic understanding of fonts and type. Using the right typeface and understanding how a font will impact your design can add that extra pop to print and digital projects and will set them apart from all others. One important area to understand is the anatomy of type. Ascenders, descenders and serifs may sound like words from another language but are the basis for understanding the style of a typeface and how if relates to your project. The next section will show a brief run through of some terminology that you should know.


Anatomy of Typography Ascender

:

The upward vertical stem on some lowercase letters, such as ‘h’ and ‘b’, that extends above the xheight is the ascender.

Aperture The aperture is the partially enclosed, somewhat rounded negative space in some characters such as ‘n’, ‘C’, ‘S’, the lower part of ‘e’, or the upper part of a double-storey ‘a’.

Axis An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.

Baseline The imaginary line upon which the letters in a font appear to rest.


CrossBar The (usually) horizontal stroke across the middle of uppercase ‘A’ and ‘H’ is a crossbar.

Bow l The curved part of the character that encloses the circular or curved parts (counter) of some letters such as ‘d’, ‘b’, ‘o’, ‘D’, and ‘B’ is the bowl.

Bracket The bracket is a curved or wedgelike connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.

Cap Height The height from the baseline to the top of the uppercase letters (not including diacritics).

Counter The enclosed or partially enclosed circular or curved negative space (white space) of some letters such as ‘d’, ‘o’, and ‘s’.

Descender Any part in a lowercase letter that extends below the baseline, found for example in ‘g’, ‘j’, ‘p’, ‘q’, ‘y’, etc. Some types of descenders have specific names.

Ear Typically found on the lower case ‘g’, an ear is a decorative flourish usually on the upper right side of the bowl.

Eye Much like a counter, the eye refers specifically to the enclosed space in a lowercase ‘e’.

Link/Neck The stroke, often curved, that connects the bowl and loop of a double-storey ‘g’.

Loop/Lobe In a double-storey ‘g’, the loop is the enclosed or partially enclosed counter below the baseline that is connected to the bowl by a link. The enclosed or partially enclosed extenders on cursive ‘p’, ‘b’, ‘l’, and similiar letters are also called loops.

Tail The descending, often decorative stroke on the letter ‘Q’, or the descending, often curved diagonal stroke on ‘K’ or ‘R’ is the tail.

Terminal The end (straight or curved) of any stroke that doesn’t include a serif.

X-height The height of the lowercase letters, disregarding ascenders or descenders, typically exemplified by the letter x. The relationship of the x-height to the body defines the perceived type size. A typeface with a large x-height looks much bigger than a typeface with a small x-height at the same size.


Height

Attempts to standardize the measurement of type began in the eighteenth century. The point system is the standard used today. One point equals 1/72 inch or .35 millimeters. Twelve points equal one pica, the unit commonly used to measure column widths. Typography can also be measured in inches, millimeters, or pixels. Most software applications let the designer choose a preferred unit of measure; picas and points are standard defaults.

W idth

A letter also has a horizontal measure, called its set width. The set width is the body of the letter plus a sliver of space that protects it from other letters. The width of a letter is intrinsic to the proportions and visual impression of the typeface. Some typefaces have a narrow set width, and some have a wide one. You can change the set width of a typeface by fiddling with its horizontal or vertical scale.This distorts the line weight of the letters,however, forcing heavy elements to become thin, and thin elements to become thick. Instead of torturing a letterform, choose a typeface that has the proportions you are looking for, such as condensed, compressed, wide, or extended.



A basic system for classifying typefaces was devised in the nineteenth century, when printers sought to identify a heritage for their own craft analogous to that of art history. Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic. These three main groups correspond roughly to the Renaissance, Baroque, and Enlightenment periods in art and literature. Historians and critics of typography have since proposed more finely grained schemes that attempt to better capture the diversity of letterforms. Designers in the twentieth and twenty-first centuries have continued to create new typefaces based on historic characteristics.


GARAMOND

Aa

HUMANIST OR OLD STYLE

The roman typefaces of the fifteenth and sixteenth centuries emulated classical calligraphy. Sabon was deisgned by Jan Tschichold in 1966, based on the sisteenth-century typefaces of Claude Garamond.


BASKERVILLE

Aa

TRANSITIONAL

These typefaces have sharper serifs and a more vertical axis than humanist letters. When the typefaces of John Baskerville were introduced in the mid-eigteenth century, their sharp forms and high contrast were considered shocking.


BODINI

Aa

MODERN

The typefaces designed by Giambattista and Bodini in the late eighteenth centuries are radically abstract. Note the thin, straight serifs; vertiical axis; and sharp xontrast from thick to thin strokes.


GILL SANS

Aa

HUMANIST SANS SERIF

Sans-serif typefaces became common in the twentieth century. Gill Sans, designed by Eric Gill in 1928, has humanist characteristics.


HELVETICA

Aa

TRANSITIONAL SANS SERIF

Helvetica, designed by Max Miedinger in 1957, is one of the world’s most widely used typefaces. Its uniform, upright character makes it similar to transitional serif letters. These fonts are also referred to as “anonymous sans serif.”


FUTURA

Aa

GEOMETRIC SANS SERIF

Some sans-serif types are built around geometric forms. In Futura, designed by Paul Renner in 1927, the Os are perfect circles, and the peaks of the A and M are sharo triangles.


hen typefaces were first invented, the notion of having a family of type hadn’t occurred to anyone. All fonts were simply roman designs. In the early 16th century, cursive – or italic (named after Italy, where the idea was popularized) – type was introduced. There were still no typeface families; romans were one style of type and italics were another – much like serif and sans serif. In the late 1700s, foundries began to release fonts in families – pairing roman and italic designs that matched each other in style. Later the concept of typeface weights and proportions was added to the typeface family mix. In the 20th century, type families were enlarged even further with the introduction of different designs such as condensed,

expanded and outlined. The person generally credited with conceiving the modern idea of a typeface family is Morris Fuller Benton, director of typeface development for American Type Founders in the late 19th and early 20th centuries. Benton’s premise was that typefaces within a family would share the basic characteristics of the parent design, but with individual variances. The Cheltenham, Century, Cloister, and Stymie typeface families are just a few of the designs developed under Benton’s watchful eye. Benton’s original vision has been expanded several times over the decades; type families have become larger, more diverse and better thought-out.


Helvetica Light Helvetica Light Oblique Helvetica Regular Helvetica Oblique Helvetica Bold Helvetica Bold Oblique


Punctuation A well-designed comma carries the essence of the typeface down to its delicious details. Helvetica’s comma is a chunky square mounted to a jaunty curve, while Bodoni’s is a voluptuous, thin-stemmed orb. Designers and editors need to learn various typographic conventions in addition to mastering the grammatical rules of punctuation. A pandemic error is the use of straight prime or hatch marks (often called dumb quotes) in place of apostrophes and quotation marks (also known as curly quotes, typographer’s quotes, or smart quotes). Double and single quotation marks are represented with four distinct characters, each accessed with a different keystroke combination. Know thy keystrokes! It usually falls to the designer to purge the client’s manuscript of spurious punctuation.

{[“‘,.:;’”]} HELVETICA NEUE BOLD

{[“‘,.:;’”]} BODINI BOLD

5’2’’ eyes of blue PRIME OR HATCH MARKS INDICATE INCHES AND FEET

Commonly Abused Punctuation Marks

It’s a dogs life APOSTROPHES SIGNAL CONRTACTION OR POSSESSION

He said, “That’s what she said.” QUOTATION MARKS SET OFF DIALOGUE


Hyphens connect linked words and phrases, and they break words at the ends of lines. Typesetting programs break words automatically. Disable auto hyphenation when working with ragged or centered text; use discretionary hyphens instead, and only when unavoidable.

En dashes serve primarily to connect numbers (1-10). An en is half the width of an em. Manuscripts rarely employ en dashes, so the designer needs to supply them.

Em dashes express strong grammatical breaks. An em dash is one em wide-the width of the point size of the typeface. In manuscripts, dashes are often represented with a double hyphen (--); these must be replaced.

Discretionary hyphens, which are inserted manually to break lines, only appear in the document if they are needed. (If a text is reflowed in subsequent editing, a discretionary hyphen will disappear.) Wayward hyphens often occur in the mid-dle of a line when the typesetter has inserted a “hard” hyphen instead of a discretionary one.

Quotation marks have distinct “open” and “closed” forms, unlike hatch marks, which are straight up and down. A single close quote also serves as an apostrophe (“It’s Bob’s font.”). Prime or hatch marks should only be used to indicate inches and feet (5’2’’). Used incorrectly, hatches are known as “dumb quotes.” Although computer operating systems and typesetting programs often include automatic “smart quote” features, e-mailed, wordprocessed, and/or client-supplied text can be riddled with dumb quotes. Auto smart quote programs often render apostrophes upside down (‘tis instead of ‘tis), so designers must be vigilant and learn the necessary keystrokes.




When we talk about a font’s spacing, or letter fit, we’re referring to the amount of space between the characters, which in turn gives the typeface its relative openness or tightness. A font’s spacing is initially determined by the manufacturer or designer and is somewhat size-dependent. Text designs tend to be spaced more openly than display faces. The reason? The smaller the point size, the more space is needed between letters to keep the characters legible. Conversely, as a typeface is set larger, a snugger fit between letters creates word-shapes that are easier to read. Although spacing is dictated by personal taste as well as typographic trends, the goal of good letter fit remains the same: to create even “color,” or visual texture, between all character combinations. It’s more difficult than it might seem, since the irregular shapes of many characters create some problematic letter combinations. This is where kerning comes to the rescue...


“Most people think typography is about fonts. Most designers think typography is about fonts. Typography is more than that, it’s expressing language through type. Placement, composition, typechoice.” -

Mark Boulton


Kerning refers to the adjustment of space between two specific characters, thus the term kerning pair. Most often, kerning implies a reduction of space, but it can also mean the addition of space. Kern pairs are created to improve the spacing between two letters when the normal spacing is less than ideal. A perfect example is the spacing between a cap ‘A’ and ‘V.’ Typically, both ‘A’ and ‘V’ would be spaced so the terminals of their diagonal strokes nearly touch the vertical stroke in the adjacent letter, like an ‘H.’ When a ‘A’ and ‘V’ are set next to each other, however, the spacing looks too open. Kerning adjusts the spacing to be optically correct. Most fonts have between two hundred and five hundred built-in kern pairs. A high-quality font may have over a thousand kern pairs.


NO KERNING

KERNING APPLIED


Tracking refers to uniformly increasing or decreasing the horizontal spacing between a range of characters. Most often used to adjust and finetune overall letterspacing, tracking can create more readable, pleasing color and texture. It can be utilized for just a few words (such as a logo, headline or title) or for an entire article, and can be applied in small increments to achieve subtle, gradual refinements.

The ability to change the overall letterspacing of type is important when using digital fonts, with their “one-size-fits-all” scalable outlines. In the days of metal type, each point size of a given typeface was a separate ‘font,’ so the punch cutter was able to make slight adjustments to the design and spacing of each point size.

RELATED DO’S AND DON’TS INCLUDE: • Open tracking when using a font intended for display at smaller-than-display sizes. • Close tracking when using text designs at larger sizes. • Open tracking when setting small type in reverse or on a busy background, both of which will make the type appear tighter. • Avoid ‘tracking out’ (or letterspacing) lowercase excessively, as this results in reduced readability. • Use tracked out (or letterspaced) caps conservatively, in most instances for a few words only.

spacing needs to be. This capability has been all Professional quality but lost with today’s digital typefaces are designed and type (with the exception of spaced for a particular size optical font sizes). It now range. If you are using a falls to the designer or typeface within its intended production artist to make size range, you might not smart typeface choices, and need to adjust the spacing then to fine-tune the type at all. But if you are setting as necessary to achieve the the type larger or smaller most readable results. than this range, the use of tracking will help maintain Before experimenting with good overall color and tracking, keep in mind readability. Additionally, these fundamentals about the built-in spacing of some letterforms, spacing, and typefaces may not work optics. As type gets larger, well for your intended the spacing between letters use. Examples of this will appear to be more might include printing on open; therefore, overall porous surfaces or in lower spacing should become resolution environments, tighter in order to maintain either of which might good typographic color require more open spacing. and texture. Conversely, Billboards or other large as type gets smaller, the signage might call for spacing will appear to be tighter spacing. Usages tighter, which can result such as these may benefit in decreased readability. greatly from the application The smaller the type size, of tracking to customize the more open the ‘actual’ and finesse the type.


Tracking Tracking Tracking -50 TRACKING

0 TRACKING

50 TRACKING


BBBBB BBBBB BBBBB


B B B

Bold typefaces, as companions to regular text weights, did not become fashionable until the mid-19th century. Although it is hard to imagine today, the original fonts of Baskerville, Caslon, Garamond and Bodoni did not include bold weights. Bold type grew out of the Industrial Revolution and the birth of advertising. In fact, the first popular bold typefaces were display designs intended to be used at large sizes to grab the reader’s attention. It was only later that bold designs were regularly added to typefaces used to set text copy. Bold typefaces can go by many names: demi bold (sometimes just “demi”), bold, extra bold, and black and ultra. As the names imply, their stroke weights are incremental degrees heavier than the basic roman or medium weight of a typeface. Their primary use in text copy is to provide emphasis or establish a typographic hierarchy that conveys relative ranking of information.

Bold weights of type can easily establish priority. Typographic hierarchy is about creating different levels of importance through typeface choice and text arrangement. Used sparingly, different typeface weights (and proportions) can guide the reader through long or complicated documents. Think of the various typeface weights as graphic road signs: a few, well-placed, will help the reader navigate the content. Too many will distract and confuse. Headings are often set in bold type, as are subheads and page numbers. “Jump Lines” – short messages to the reader at the end of a column, explaining where the text continues –, are also frequently set in bold type. In addition, if used sparingly, bold type on a page adds a touch of graphic diversity to otherwise monotone pages of text copy.

Colaborate Regular Colaborate Bold


Choosing to align text in justified, centered, or ragged columns is a fundamental typographic act. Each mode of alignment carries unique formal qualities, cultural associations, and aesthetic risks.


CENTERED Lines of uneven length on a centeral axis Centered text is formal and classic. It invites the deisgner to break a text for sense and create elegant, organic shapes. Centering is often the simplest and most intuitive way to place a typographic element. Used without care, centered text can look staid and mournful, like a tombstone.

JUSTIFIED Left and right edges are both even Justified text makes a clean shape on the page. Its efficient use of space makes it the norm for newspapers and books. Ugly gaps can occur, however, as text is forced into lines of even measure. Avoid this by using a line length that is long enough in relation to the size of type. As type gets smaller, more words will fit on each line.

FLUSH LEFT/RAGGED RIGHT Left edge is hard; right edge is soft Flush left text respects the organic flow of language and avoids the uneven spacing that plagues justified type. A bad rag can ruin the relaxed, organic appearance a flushleft column. Designers must strive vigilantly to create the illusion of a random, natural edge without resorting to excessive hyphenation.

FLUSH RIGHT/RAGGED LEFT Right edge is hard; left edge is soft Flush right text can be a welcome departure from the familiar. Used for captions, side bars, and other marginalia. Used for captions, side bars, and other marginalia, it can suggest affinities among elements. Becaouse flush right text is unusual, it can annoy cautious readers. Bad rags threaten flush right text just as they afflict flush left, and punctuation can weaken the hard right edge.


TYPE STYLE Typeface and weight play a key role in establishing typographic hierarchy, especially for headlines and subheads. Generally speaking, bold, decorative, or more distinctive typestyles command attention and denote importance, but so can an ultra light typeface in the right setting.

One of the most important aspects of communicating with type is to establish a strong typographic hierarchy. This refers to presenting the content in a way that visually conveys where to look, and in what sequence. The styling and placement of all elements – both type and images – should guide the viewer through the content in order of importance.

CASE The use of all caps in small doses can be an effective way to draw attention and denote importance, particularly for headings or subheads. On the other hand, all caps are known to have reduced readability, so using upper and lowercase is preferable for lengthy settings, including running text.


TYPE SIZE The viewer’s eye is usually drawn to the largest-sized type first (which is usually, but not always, the headline), and then moves on to other elements. Although headlines most commonly appear at the top of a page, this placement is not a requirement. A well-designed composition will guide the reader to the headline and other important elements no matter where they are located.

PLACEMENT AND SPACING The placement of all elements, as well as the space between and around them, is part of the overall hierarchy. Keep the most important information prominent. Place all related elements together, while visually separating others to organize the content.

COLOR The use of color can either draw attention to or de-emphasize an element. For instance, red type on a page with mostly black text will instantly stand out, while making a less important element gray amidst black text will downplay it. Keep in mind that too much color used in too many instances can create visual confusion, which in turn undermines its effectiveness.

ALIGNMENT How elements are aligned can imply their relative level of significance. Centering, for instance, conveys a sense of importance, and is frequently used for titles, headlines, announcements and invitations. Conversely, running body copy usually calls for less emphasis than headings and subheads, and is commonly set flush left, which is easier to read.






definitions


S lug The slug area is discarded when the document is trimmed to its final page size. The slug area holds printing information, customized color bar information, or displays other instructions and descriptions for other information in the document. Objects (including text frames) positioned in the slug area are printed but will disappear when the document is trimmed to its final page size. Objects outside the bleed or slug area (whichever extends farther) do not print.

Grid

Bleed The Bleed area allows you to print objects that are arranged at the outer edge of the defined page size. For a page of the required dimensions, if an object is positioned at its edge, some white may appear at the edge of the printed area due to slight misalignment during printing or trimming. For this reason, you should position an object that is at the edge of the page of the required dimensions a little beyond the edge, and trim after printing. Bleed area is shown by a red line on the document. You can set bleed area settings from Bleed in the Print dialog box.

Spread

A grid is the skeleton or framework that allows for arranging content within the space of the page. It is the building block of all digital images and marks and is not a rigid formula, but instead a flexible, resilient structure.

Facing pages; made up of an even-numbered page on the left (verso) and an odd-numbered page on the right (recto).

As a designer the benefit of using a grid is to have the ability to arrange text in as many different ways within the structure of the grid as possible. The grid allows designers to experiment with variations of alignments, fonts, sizes, arrangements, and ideas quickly and easily in an orderly fashion.

Page mar­gins set the de­fault ter­ri­tory your text oc­cu­ pies on the page. Page mar­gins de­ter­mine the width of the text block, and thus have the great­est ef­fect on line length. (point size also af­fects line length, though more finely.) As page mar­gins in­crease, line length de­creases, and vice versa.

C rop M arks Small lines offset from the edge of the finished piece that instruct where to cut or trim the final page to a finished size. These will not appear on the finished piece.

Margin

Trim The trim size is the dimension at which the printer will cut the page.



FONTS Bodini Futura Gill Sans Helvetica Garamond Colaborate Baskerville Enlightenment

Times New Roman

WEBSITES

1. https://www.fonts.com/content/learning/fyti/typographictips/typographic-hierarchy 2. http://www.thinkingwithtype.com/contents/text/#Hierarchy 3. https://www.fonts.com/content/learning/fontology/level-2/ text-typography/paragraph-formatting 4. https://www.fonts.com/content/learning/fontology/level-2/ text-typography/bold-type-in-text 5. https://www.fonts.com/content/learning/fyti/using-typetools/spacing-and-kerning-2 6. http://www.thinkingwithtype.com/contents/ letter/#Punctuation 7. http://www.dictionary.com/browse/typography 8. http://www.macgra.com/1107Printips.pdf 9. http://web.simmons.edu/~benoit/infovis/typeface_anatomy. pdf 10. http://typeanatomy.com/



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.