PBA Front-End Programming

Fonts

Using Fonts

• Why do we need to consider fonts…?– Make it as easy as possible

for the user to read the textual content of a page

– To convey feelings…

Using Fonts

• Formal definitions:– A typeface: an artistic represen-

tation of the characters, etc in the alphabet

– A font: A typeface in a given size• However, terms are used

interchangeably in digital publishing

Using Fonts

• Size of fonts is traditionally measured in points

• Not quite a standard measure – most common definition is– 1 point = 1/72 inch ≈ 0.35 mm

• More rarely used is pica = 12 points• 1:1 match with ”older” screen resolutions

(72dpi)

Using Fonts

• Another important component is the space between subsequent lines

• Often calling leading

12 pt. font

18 pt. leading

Using Fonts

• Two main families of fonts• Serif (with ”feet”), aka Antikva• Sans Serif (without ”feet”), aka Grotesque

Using Fonts

• Serif font are considered traditional fonts• Times (new) Roman• Purpose of Serifs (feet) to ”lead the eye” by

creating an imaginary line• Debated…

Hello there

Using Fonts

• Sans Serif fonts (like this) have traditionally been used for short text, e.g. headlines

• Are now generally accepted as the best choice for text on screen

• Argument: Serifs tend to ”smear” on screens with traditional resolution (72 dpi)

• Argument may outdate as screen resolutions improve…

Using Fonts

• Choosing the right font for the job…– Make sure the content

is readable– Choose fonts that

match the general theme of the wesbite

Using Fonts

• Make sure the content of a page is readable– The longer the text, the more

”neutral” the choice of font– For large bodies of text, stick

with a variant of the main-stream Sans Serif fonts

– For short texts like headlines, more freedom

Ski ’n Fun

Come with us to the famous resort of Val D’isere, where we will enjoy miles and miles of crystal white alpine slopes, while the vibrant after-ski party life awaits us when darkness falls.

Book your ticket at Ski ’n Fun today!

Ski ’n FunCome with us to the famous resort of Val D’isere, where we will enjoy miles and miles of crystal white alpine slopes, while the vibrant after-ski party life awaits us when darkness falls.

Book your ticket at Ski ’n Fun today!

Ski ’n FunCome with us to the famous resort of Val D’isere, where we will enjoy miles and miles of crystal white alpine slopes, while the vibrant after-ski party life awaits us when darkness falls.

Book your ticket at Ski ’n Fun today!

Using Fonts

• The big question – how do we pick a font, that matches a certain theme or feeling…?– When is a font ”elegant”– When is a font ”funny”– When is a font ”scary”

• No firm rules, use your common sense, and observe what others have done…

• …and test your choice (usability)!

Using Fonts

www.fontco.com

Using Fonts

• What about font size…?• Books keep lines of text short (10 cm), to avoid

reading fatigue• Modern screens are 30-40 cm wide…• Should we ”mimic” book layout by using larger

fonts?• Screen geometry fundamentally different…

Using Fonts

Using Fonts

• General tips on font size– Users like larger fonts than designers do– Use leading to increase readability – good choices

are 10/12 and 12/14– Ideally; design to allow the user to change the font

size, screen geometry, etc (responsive design)– However, the far majority of users cannot be

bothered to change default settings

Using Fonts