Graphic Information Design: Typography

Jan Tschichold, who was a typographer, book designer, teacher and writer who along with Bauhaus typographers such as Herbert Bayer and Laszlo Moholy-Nagy, as well as El Lissitzky and many others are all major contributors to graphic design as we know it. Typography is an oft understated contribution to knowledge, like architecture, combining both form and function to produce a carriage of information and language.

Jan Tschichold
Jan Tschichold

 

These typographers pioneered production techniques and stylistic devices used throughout the twentieth century, however, they represent the culmination of thousands of years of design heritage leading towards today. Jan Tschichold codified the principles of modern typography in his 1928 book, New Typography. He later repudiated the philosophy he espoused in this book as being fascistic, but it remained very influential.

 

From early illuminated manuscripts of the middle ages such as the Book of Kels, page layout, typography and graphic design were key elements in the production of hand-copied books. From it’s origins, the arts of page layout and typography developed into the intricate modern magazine and catalog layouts which we see today.

 

Proper page design has long been a primary consideration in printed material. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing) and letter spacing. Until the digital age, typography was a specialized occupation. Digitization opened up typography to new disciplines of visual design.

 

Typography is the art, craft and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques. Type is the most fundamental element of information conveyance. In graphic design, the goal is to not to just fill a page with text, but rather to understand and use it effectively for communication of its content.

 

Choice of fonts (typefaces), size, alignment, colour, and spacing all come into play. Typography is the art, craft and techniques of type design, and arranging type. The arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and letter spacing.

 

bauhaus-school-of-design

The emigration of the German Bauhaus school of design to Chicago in 1937 brought a “mass-produced” minimalism to America. This created “modern” architecture and design exploded through these influences.

 

Typeforms are an integral part of modern communication. Since the invention of the printing press, people have used printed, and more recently, electronic type to communicate. Type can be taken further by using it to create shapes and images such as is found in diagrams, mind maps and certain art forms.

 

There are many kinds of decorative typeface that one would not want to set an entire article in because a purely decorative typeface can be distracting to the content of the message and tire the reader’s eyes when used in large portions.

 

Our eyes are most comfortable reading less complex typefaces. Decorative typefaces are better suited for display type (greater than 14 point), while simpler type is better used for text (less than 14 point). To maintain readability in large blocks of text, such as in an article, it may be better to stay consistent, and use only one family.

 

A font may be used successfully or poorly, depending on its degree of relevance in the project and the skill of the designer. A designer must pay careful attention to letter, word, and line spacing as well as the size of the typeface and its stylistic contribution to the overall aesthetic of the project. The aim of the designer is to optimize the properties of the text for its purpose in the overall design (aesthetic or communicative) and maintain legibility where necessary.

 

Type is measured in points

The designer is expected to add visual variety with formatting and layout, as well as font changes where applicable. Type is measured in points, from the top to the bottom of the letters’ invisible bounding boxes. Since each letter fills up a percentage of the bounding box, when the size of the box is increased, the letter size increases. Some familiar divisions are the serif and sans-serif fonts. Serif fonts, like Times, have the little feet and variable line width characters which make them easy to read.

 

Sans-serif fonts, like Helvetica and Verdana, are drawn with more even-width lines and don’t have the little feet, which gives them a clean, modern feel. A typeface is a style of lettering such as Helvetica or Times. In 1932 Stanley Morison developed the design of the Times New Roman font which was commissioned by the Times of London.

 

In 1957 Max Miedinger designed Neue Haas Gotesk font which was later renamed Helvetica. A font is the set of a typeface, used to produce the letters. People often confuse “font” with “typeface”.

 

For example, Helvetica, point 12 is a different font from Helvetica, point 14, even though both are of the same typeface. It is important to develop an appreciation and understanding of both modern and historic typography. In everyday life it is a valuable exercise to pay attention to the stylistic and practical uses of typefaces in various kinds of media.

 

serif-and-sans-serif-fonts

Typefaces are used in print and electronic media not just to communicate a legible message, but as an expressive tool. Each typeface can be used to convey a different atmosphere. There are typefaces evocative of Art Deco, childhood, the Middle Ages, handwritten text, and many varieties of style. Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space.

 

Pairing type is generally done to create contrast, so a good general rule is to not pick two fonts that are so similar they can be confused for each other at a glance. A set of similar typefaces is called a “family.” Within a family, typefaces are categorized as parent (e.g. Times, Helvetica) or relative (e.g. bold, italic). Typefaces are categorized also according to style (e.g. italic, book), weight (e.g. bold or light), and width (e.g. expanded).

 

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

 

Continual graphic design wisdom holds that of the categories of serif and sans-serif, serif fonts are easier to read. This is because when reading, the eye quickly scans the tops of the letterforms, and a serif font has more immediately recognizable features thanks to the tiny ‘eye-holds’ provided by the serifs.

 

There is a notion gaining acceptance, that, for the purposes of purely electronic design, the reverse is sometimes true. Sans-serif fonts are more readable in this case because a screen has a lower resolution than a printed page, so the serifs only serve to smudge the letter forms.

 

kerning-and-tracking

Kerning is the term used to denote the horizontal spacing between exactly two glyphs. Tracking is the horizontal space added to or subtracted from the space between each and every pair of glyphs in a selection.

 

In other words tracking adds to or subtracts from the kerning of all pairs of glyphs in a selection. Word spacing should make clear the beginnings and endings of words. Letter spacing and line spacing may be used to expand on the expressiveness of the font. Enough space should be left between the lines so that the text is legible.

 

The principle aimed for is that the reader’s eyes should be pulled to the next word as they read and not to the lines above and below. The letter spacing should be so the reader can clearly differentiate between different characters. The typeface should be of a reasonable size for reading.

 

The numbered size of a typeface may reflect the overall height of the lines that stick out of the type, but not the readability size that relates to the inner dimensions of the letters. Type size should be chosen on a visual basis, and not purely on that of font size numbers. Leading is the vertical spacing found between separate lines of type.

 

There is a relationship between the length of the line and the amount of leading needed for easy legibility. Longer lines need more leading to prevent the reader’s eye from slipping up or down when moving from the end of one line to the beginning of the next. Short lines are preferable if information density is important.

 

Typographic Colour is something of a misnomer in that it is only concerned with one aspect of colour – that of value. The darkness or lightness of a block of text is the typographic colour of the block of text. Typographic colour is strongly influenced by spacing.

 

There is much difference in the feelings aroused by a dark block of text (long lines with little tracking and leading as seen in many legal agreements) and a light block of text with lots of space. With text used purely for graphical or display purposes, spacing, fonts, or colours that would be considered unconventional can be utilized to create a visually desirable effect.

 

typeface-anatomy

 

The legibility rules that are extremely important in body text aren’t as critical to effect the larger typeface size. There is a standard set of terms to describe the parts of a character. These terms, and the parts of the letter they represent, are often referred to as “letter anatomy” or “typeface anatomy.” By breaking down letters into parts, a designer can better understand how type is created and altered and how to use it effectively.

Next Article

Previous Article


by Alex Dunedin