sans serif fonts - typography.weebly.com · • it’s an old-style serif font without the serifs -...

36
sans serif fonts

Upload: hangoc

Post on 18-Aug-2018

233 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

sans serif fonts

Page 2: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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”?

Page 3: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 4: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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.

Page 5: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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.

Page 6: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

“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.

Page 7: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 8: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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.

Page 9: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

The letter a...aaaaaaaaa

aaaaaaaa

aaa

aaaaa

aaaaaaaa

Page 10: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 11: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 12: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 13: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 14: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

JohnstonUNDERGROUND

Piccadilly Line

Piccadilly Line

Gill Sans

Page 15: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 16: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 17: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

Galileo’s tomb,birthplace of

Optima

Page 18: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

(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

Page 19: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 20: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 21: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

mixesmixes well

un

iversunivers

with others

univers

with othersmixes well

Page 22: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 23: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 24: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 25: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

Stone Serif

Stone SansStone Informal

hamburgerhamburger

Page 26: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 27: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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.

Page 28: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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.

Page 29: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 30: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 31: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 32: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 33: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

Scala Sans

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

g o a

Page 34: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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

Page 35: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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.

Page 36: sans serif fonts - typography.weebly.com · • It’s an old-style serif font without the serifs - some letters flare at the stroke ends. ... The a in Helvetica is busy, with an

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