a dummy’s guide to
typography
T y pefaces
01 Typfaces
What makes a typeface Weight Some type families are broad and contain within them a bounty of options, useful for a wide variety of typographic needs. And the inherent benefit to sticking with one family is that the type designer has already created a harmonious grouping of proportion and shape. We do not need to guess whether these variations belong together; they are designed to be familial and therefore comfortable with one another. This means that they will be more flexible than other type families and will include several weights. Size Typefaces that were designed for specific things such as headlines tend to be less readable at small sizes and should not be used for body copy. These are called display faces. Other typefaces are designed to be used in large areas of smaller body copy, these are called text or body typefaces. Text typefaces have been designed with legibility and beauty as their twin goals. Most text typefaces have stood the test of time and usage as appropriate for lengthy passages of text under a variety of reading conditions and with the expectation of a broad reader demographic. Display typefaces, designed less urgently for legibility (although some are eminently legible), are more about style, so the level of legibility may be very minimal. Some display faces are so specific that they almost demand a unique use, and to try and force them into doing and saying something that they were not meant to do is practically impossible.
02 Typfaces
Style Some typefaces were not meant for legibility or body text. Many faces are drawn for the purpose of creating a typographic statement, or for providing a particular spirit or feeling to graphic communication. Some typefaces are just designed to have stand that made them stand out from the crowd. To the degree that a typeface has personality, spirit, or distinction, however, it almost always suffers proportionally on the legibility scale. Which means using it as body text is the worst idea to have. Remember, each typeface can hold many different meanings. Sometimes finding this meaning is difficult. Spirit Letterforms can amplify the emotional weight of the text. The delicate tracery of a flowing italic might best convey a poem about nature. The chest-thumping proclamations of a heavy slab serif might punch up a political pronouncement. The rational intellectualism of an old-style typeface might add credibility to a well-reasoned debate. The proper choice of typeface is therefore essential to the tenor of the message, and it may add to-or, if a poor choice, may detract from – the believability of the text. Other factors play into emotional content. Rounded shapes and lighter weights might convey a more feminine touch, such as those used on most cosmetic packaging. The opposite is generally true for products appealing to a male demographic: these would typically have more weight, and be more squared off and “muscular� in appearance. The colour of the type affects its emotional content, too. We think of warmer or more subdued shades as more feminine; primary colours as appealing to children; deep burgundies, forests greens and navy blues as more masculine. Yes, these are stereotypes, but stereotypes exist for a reason and can be used very successful to appeal emotionally to a specific audience.
03 Typfaces
Working with typeface Choosing the correct typeface Finding the right typefaces is challenging. When choosing typefaces, consider how you plan to use it and choose something that is easy for the readers to grasp immediately. Also think about what kind of “spirit” your project embodies, what theme/style suits it, and look for a typeface that fits. It will help get your message across. Something that is familiar is the best,something with recognizable features and proportions. Remember letterforms should be easy to see. Good typography with legibility helps people read your copy, while bad bad typography prevents them doing so. Questions to ask yourself when choosing a typeface ◆ What size will the text be used at? ◆ Will it appear as body copy or a headline? ◆ Does it need to be a workhorse or will it be used more as eye candy? ◆ Will it be paired with another font? ◆ Does the appearance of the typeface complement the subject matter? Some good typefaces that are easier to read? Those which people are accustomed to reading, like the Century family, Caslon, Baskerville, and Jenson. The more outlandish the typeface, the harder it is to read. Sans serif faces are particularly difficult to read. Says Jogn Updike, “Serifs exist for a purpose. They help the eye pick up the shape of the letter.” The eye “cannot read with ease any considerable number of words composed of letters embodying sharply contrasted thicks and thins.” Some more good typefaces would be Garamond, Helvetica, Futura, and Gill Sans.
04 Typfaces
Eshcew decorative type Simple, clean, basic type styling can be beautiful and effective; it is not necessary to embellish information in order for it to be appealing to the reader. Indeed, there is much to be said for leaving the bells and whistle to the display type, or to eliminate it altogether. Serious content is better served with a straightforward approach, and most informational text is best when treated simply. This creates good counterpoint: any accompanying images will be unencumbered by “noisy” typography. Working with multiple typefaces Different typefaces could be designed by different people, from different historical classifications, with difference characteristics. Will/Can they work together? Is there really a need for each of them? Do they preform essential functions? Is there enough difference between them to justify employing them? “Too many (unnecessary) choices can result in “type soup”.” The rules of three typefaces Conventional wisdom holds that most projects requite only three typefaces/type families. Compatible choices of; a legible serif, a simple sans serif, and a display typeface (usually sans serif). The available variations in weight, slope, and width should be more than adequate to handle the needs of the content. The primary benefit in this approach is the likelihood that, by limiting the typefaces, compatibility and harmony will be maximized.
05 Typfaces
Theory of relativity Words exist in relation to other words. Therefore, every design that is made, wether style, size, weight, width, colour, or contrast, must take into consideration all of the other words (and all other the other elements) on the page or screen. Every design decision, no matter how small, has an effect on every other aspect of the design. Changing the scale of one word may necessitate adjusting the scale of another, and not necessarily by the same percentage. The more elements there are, the more complex the equation becomes. All typographic elements within the paragraph have a relationship of each to every other, and all to the whole. The reader of each to every other, and all to the whole. The reader must see a clear hierarchy and elements must be legible. For a designer, balancing all of the typographic elements is one of the greatest challenges. Even slight adjustments in text characteristics (tracking, size, colour, weight, slope, etc.) can clarify content. Last but not least, once again and always, it is the typographic relations that exist on the page, screen or document that are the ultimate arbiters of the success of the designer. Clarity of intent, clear separation of elements, typographic harmony, beauty and legibility must reign together to form a satisfactory whole.
06 Typfaces
T y pog raph ic Desi g n
09 Typographic Design
Designing book pages Margings and gutters The spaces within and between areas of text are places where the eye can rest; they also help design the tenor of the content. Books have a more leisurely pace and the margins and gutters reflect that pacing; magazines and newspapers are “busier” and more urgent in their appearance, so the space around the text is lessened. Gutters and the space they require depend of the width of the project and the binding (as well as the weight and the flexibility of the stock). A saddle-stitched project will fall open to the page more easily and therefore need less space across the gutter; a perfect-bound project, stiffer in the middle, will need more gutter space so that the text does not get “swallowed up” in the middle. Commentary, Marginalia and alternate languages A common practice is that of allowing an extra-wide margin outside of the primary text area (hence the term marginalia). In order to set the text apart even further and to respond to the narrower measure, marginalia is usually set in a smaller point size with correspondingly proportional leading; sometimes its colour or slope are also different from the main text. Other navigational devices include any directional signals that direct the reader: arrows, dotted lines, section heads, and any and all typographic or related glyphic elements that serve this purpose fall into this category.
10 Typographic Design
The multicolumn text grid Grid systems formatted to contain text and images can take many forms and be multifunctional. They should be flexible enough to accommodate all possible situations in the case of a complex document or project. Grids are invaluable in organizing text and other visual elements and in creating a comfortable environment for the reader. Depending on the size of the vessel (page or screen_ and the size, leading, and weight of the text, multicolumn grids may contain as many as twelve columns (as in the well-known grid used by Willi Fleckhaus for the German magazine Twen) or as few as two columns. The width of the column may vary, but principles of legibility (optimum line length and character count) should be observed. An uneven text grid An interesting trend that goes against conventional practice is the use of uneven-width columns on the same page or within the same story. This is a step beyond the opening paragraph treatment, and it can be seen in a number of mainstream high circulation magazines that are breaking out of the usual formats with some hits of “subversive� typography. Text overlapping images Legibility issues come into play when type overlaps images: the image demands out attention. To make the type stand out, type size and style, contrast with the background, and stroke weight all contribute to the important separation between the background and the foreground. Laying a few words of display type over an image can be complex enough, but where some designers go wrong is laying a quantity of text over an image – this is sure to make reading a difficult task.
11 Typographic Design
Text overlapping text The key to success when text overlaps text is differentiation, whether by scale, background, and foreground contrast structure, or size. Again, legibility is paramount, so the designer must make certain that the overlap doesn’t muddle the meaning. Separation can be accomplished using the same tools as just described for text overlapping images, but if all of the text is meant to be read, it is more difficult to maintain legibility than when part of an image may not be visible, however, its effect is still obviouds. Framing the text Looking at the text as a unit, how much space should be allowed around the edges of the page, ad between the two pages? Classical proportions such as the golden section rectangle are often used in book design, and magazines and newspapers have conventions all their own (generally there is not as much space devoted to framing the text in these). In web design, space is even at a greater premium, with margins that are almost non-existent. Floating in Space Think of the typography as a person, who needs a certain amount of personal space to feel comfortable�. How much should be left so that there is a feeling of enough separation? This may depend on how much circumstances as on the type of person (or content).
12 Typographic Design
Less is more Simplicity has an undeniable appeal to a time-pressured and overworked reader. A type treatment that promises to be “quick and easy” is just what the doctor ordered. Type that has minimal detail, has highly legible letterforms, and is floating in a good-sized space feels like a breath of fresh air even before we choose to read it. A page with little content makes the reader feel less intimidated and they don’t have to panic about where to start reading first and dart their eyes around the page. More is more A smorgasbord of content served up to the reader feels bountiful, and the urge to overstuff ourselves is ever so tempting. A plethora of choices competing for attention may deter timid or tired readers, but its main advantage is that this approach offers many opportunities for the reader to find something of interest. This is the theory behind magazine covers with many layers of cover lines, and newspapers that display as many stories as possible on their front pages. Chaos versus order Opposites attract and can coexist. As long as the designer’s intention is clear, either approach may work well – or, in some cases, both can work together, playing off one another. Considering typographic mass Walls and blocks of type can be assembled to great effect: discrete units of type look organized and have heft within their design environment. The text within the blocks may vary in size, weight, width, and even typestyle, as long as the mass looks intentionally assembled.
13 Typographic Design
Hierarchy Make your hierarchy consistent/repetitive (repetition creates emphasis, is familiar, and creates impact). Make this hierarchy clear to the reader, makes their task of reading and finding information that want/need easier. Hierarchy on a page can be asserted by using position, size, weight, colour, contrast, special effects. Text in primary positions receive visual priority such as somewhere up high. The higher the better. Right-hand side has slight preference over left-hand side. Size is a good way to decide hierarchy and it can trump position if the size is big enough. Weight enables the use of hierarchy because thin is less visible and fatter is more visible. Wider letter stems and stroke widths are also more visible. Weight can trump both size and position. Black and white provide highest level of contrast but strong colour creates pop and can be more prominent/eye catching. You could also have a colour theme. Contrast is a great way to determine hierarchy, such as between headers and sub headers. Special effects such as beveling, embossing, glows, feather, etc can be useful in allocating hierarchy
14 Typographic Design
Glossary : Typeface The term ‘typeface’ traditional refers to any full set of standarised letterforms designed for reproduction through print. In recent years, this has also included faces desigend specifically for digital screen use.
Font Italic Lowercase Typeface Upercase Weight Stress
Colour
15 Glossary : Typeface
A size, weight and style of a typeface, such as Helvetica italic. Angles letters, originally based upon handwritten script. Printer’s term for miniscule letters, kept in a seperate drawer or case of metal type. A set of standardised letters designed for machanical or digital reproduction. Printer’s term for capital letters. The thickness of stroke contributing to the boldness of the type. Used to describe the angle of variationg between thick and thing stroke width. The term colour describes both the tonal density and texture created by type when set as continues running text upon the page (qualities also sometimes descrbed in terms of grey valu) and, more specifically. the degree of variation or contrast in weight between think and thin strokes).
What makes a typeface X-Height
Cap height Baseline The body
Ascender Body height Descender Line measure Pica (or pica em)
Refers to the height of the top of the lowercase letters specifically the height of the lowercase c. A typeface with a igher x-height and shorter ascenders provides for larger lowercase letters in relation to the body size and cap height. Refers to the height of the uppercase letters, which is requently a little lower than the full hight of the ascenders. Is the line upon which the bases of the letters sit. Descenders will therefore extend below the baseline. The point size describes the size of the body upon which the type was cast - a height incorporating the tallest and deepest elements of letters in the font. Within this overall ehight a typeface will have a consistent baseline, x-height and cap height. The part of some lowercase letters that extends above the x-height The overall height of the font, including the ascenders and descenders. The part of some loervase letters that extends below the baseline. The width of a column, determining the number of characters to the line A measure of 23 points
16 Measurement : Glossary
written and designed by
sarah griffiths