sans serif fonts

Cliché Warning

• What was once a radical departure in type design is now ubiquitous

• The triumph of the sans serif in contemporary design is complete

• Why innovate when you can slavishly copy and still look “contemporary”?

Top 10• Nine of the top ten fonts sold by Linotype are

sans serif designs.

1. Optima

2. Eurostile

3. ! - a sc"pt font

4. Avenir

5.

6. Futura

7. Helvetica8. Univers

9. Frutiger

10. Neue Helvetica

Distinguishing Marks

• Most of the top 9 sans serifs resemble each other quite closely, though with practice they can be distinguished!

• All are easy to find, with the key to their success being the huge variety of weights and widths available.

• Since the 1950s, the predominant design fashion has used variations in font weight as a signature style.

Origins

• Although some designs appeared earlier (particularly for non-Latin types), sans serif romans emerged in the 19th Century as a solution to the problems caused by mechanisation.

• Rotary presses were faster than traditional letterpress printing methods, but fragile serifs would often break – especially the elegant Moderns, with their hair serifs.

“Gothic”

• The word gothic has always been pejorative, and was used to describe the early sans serifs by American printers who found them ugly.

• Other terms, used in Europe, were grotesque (or “grot”) and Antique

• To this day many sans serif designs are called Gothic, Antique, or Grotesque.

Variations

• There are three main styles of sans serif type:

• Monolines are based closely on the original grots, having little or no variation in stroke width.

• Humanist designs emulate the proportions and strokes of old-style serif fonts, though without the serifs

• Geometrics make a virtue of using combinations of curves and straight lines

Anexactitude

• One tradition of sans serif design sought to reduce characters to their essential shapes, doing away with frivolous and unnecessary decoration.

• The problem with this idea is that there is no “pure” or “original” letterform. Letters are anexact.

• Writing works because there is no one correct way to do things, so we’re able to both decipher each other’s writing and read a wide variety of type styles.

The letter a...aaaaaaaaa

aaaaaaaa

aaa

aaaaa

aaaaaaaa

Franklin Gothic

• Designed by Morris Fuller Benton around 1903

• Probably based on earlier German designs

• x-height is large; traditional g and two-storey a

• Some slight variation in stroke width

• Like Trade Gothic, used because it is so very anonymous

g o a

Futura

• Based on sketches by Paul Renner, Germany 1928

• The first attempt at geometric sans serif, arising out of the bauhaus movement. Similar designs include Avant Garde (larger x-height) and 20th Century.

• x-height is small; long ascenders and descenders require lots of line spacing. Schoolbook g and single-storey schoolbook a.

g o a

Futura continued

• Though it was supposed to be based on geometric principles, several compromises had to be made in the design - look closely at the a and the e. The d is not a straight line and a circle.

• See also the German New Typography movement

• More information on this in my Typography slideshow.

e d a

Gill Sans

• Designed by Eric Gill around 1928

• Certainly influenced by Edward Johnston’s London Underground type

• Classical proportions, Humanist style

• In its way, as timeless as Futura; still part of the BBC corporate identity

g o a

JohnstonUNDERGROUND

Piccadilly Line

Piccadilly Line

Gill Sans

Goudy Sans

• Designed by Frederick W. Goudy in the 1920s

• Like Gill Sans, a humanist design, though more quirky in its details

• Borrows the upward slope e from Jenson’s 1470 roman; traditional g and two-storey a

• Can be seen as a response to the geometric sans serif movement

g e a

Optima

• Designed by Herman Zapf in the 1950s, Optima is the most extraordinary of the sans serifs, having the greatest stroke contrast and most “classical” feel.

• Inspired by the inscription on Galileo’s tomb in the Santa Croce church in Florence

• It’s an old-style serif font without the serifs - some letters flare at the stroke ends.

• Unfortunately its oblique (not a true italic) is fairly ugly

g o a

Galileo’s tomb,birthplace of

Optima

(Neue) Helvetica

• Originally called Neue Haas Grotesk, designed by Max Miedinger in 1957.

• An updated monoline, related to Franklin Gothic

• x-height is large; schoolbook g and two-storey a

• An essential part of the Swiss Typography movement, Helvetica is frequently used in widely contrasting weights and widths.

• As many people hate Helvetica as love it!

g o a

Franklin Gothic, 1903

Helvetica, 1957

hamburgerhamburger

Helvetica is smaller at the same point size,and uses the schoolbook g. The e is more

closed, and the a has a longer tail

Univers

• Designed by Adrian Frutiger around 1957

• Designed from the outset to be available in a huge range of widths and weights – it’s now up to 59!

• Classic monoline design, manages the trick of blending well with a wide variety of other designs and traditions

• A better choice than Helvetica? There have been no web sites called ihateunivers.com

g o a

mixesmixes well

un

iversunivers

with others

univers

with othersmixes well

Eurostile

• Designed by Aldo Novarese around 1962

• Characteristically square letters - think early 60s TV sets!

• Short descenders and ascenders, schoolbook g and two-storey a

• Some slight variation in stroke width - look at the counter of the a

• Instantly recognisable!

g o a

Frutiger

• Designed by Adrian Frutiger for Paris CDG airport around 1968

• Humanist design, but with only slight stroke variation

• Schoolbook g and two-storey a; open faced e

• Principally designed for easy recognition of signage, but works well at smaller sizes because of its humanist leanings - it’s inherently warmer than Helvetica

g o a

Stone Sans

• Designed by Sumner Stone and Bob Ishii for Adobe in 1987

• Stone Sans is designed to harmonise with Stone Serif

• x-height is large; humanist design with echoes of Helvetica (shape of some letters) and Optima (variation in stroke width).

g o a

Stone Serif

Stone SansStone Informal

hamburgerhamburger

Myriad

• Designed by Robert Slimbach & Carol Twombly for Adobe, 1992

• Humanist sans serif with monoline colour in the tradition of Frutiger, though the a has a flatter side-wall to its counter than Frutiger.

• Adopted by Apple as their corporate font (they abandoned Apple Garamond)

• Is there much point to Myriad when we already had Frutiger?

g o a

a a aaHelvetica Myriad Frutiger Univers

The a in Helvetica is busy, with an eccentric speech-bubbleshaped counter. The Myriad a shares the flat side-wall with Helvetica, but draws less attention to itself. Its main stroke finishes flat on the baseline, whereas Helvetica’s curls around. Frutiger shares features with Myriad, but is wider. Univers shares features with Frutiger, but has the curled over top of Helvetica.

Myriad 1992hamburger

Frutiger 1968hamburger

Myriad is smaller at the same point size,with slightly narrower letters. The 9 in Frutiger

has a flatter bottom, and the e has a squarer finish.

Avenir

• Designed by Adrian Frutiger in 1988. Avenir is French for “future”

• Having designed a monoline (Univers) and a humanist (Frutiger) sans serif, Frutiger next turned to the geometrics

• Avenir is reminiscent of Futura in its proportions and in some of its forms, though the a is the traditional two-storey design.

• These variations make it easier to read than Futura

g o a

Adrian Frutiger

• Designed three of the top ten sans serif fonts sold by Linotype!

• A massive influence on graphic design over the past 50 years

Rotis Sans

• Designed by Otl Aicher for Agfa in 1989

• Rotis comes as a serif, a sans-serif, and a semi-sans face: all are designed to harmonise

• Narrow and light in colour, with a very distinctive c and e

• Some variation in stroke width, based on humanist principles

g c a e

Scala Sans

• Designed by Martin Majoor, 1993

• Compliments a matching serif design, Scala

• Humanist design with narrow letters and a chiselled look

• Traditional g and two-storey a; light colour on the page

g o a

Scala Sans

• Attractive small caps version of scala sans is perhaps one of the best reasons for using it.

g o a

Cronos

• Designed by Robert Slimbach for Adobe in 1996

• A humanist design similar to Gill Sans, but with a more hand-drawn feel, making it closer to Optima in its relationship to traditional old-style serif types.

• The italic is particularly beautiful, and is based on Chancery italics

• Traditional g and two-storey a; small x-height

g o a

Avoid...

• Avoid Arial, which is a copy of Helvetica

• Avoid also Trebuchet and Verdana, which were designed for on-line use.

• Avoid setting long passages of text in a light-weight sans serif font. Apart from lacking colour, continuous blocks of light text are hard to read.

Remember...

• There’s more to life than Helvetica

• Even if you want to go down that route, Univers is another option

• It’s worth looking at less commonly used sans serifs like Cronos, Stone and Scala