Slide 1

PBA Front-End Programming Fonts

Slide 2

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

Slide 3

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

Slide 4

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)

Slide 5

Using Fonts Another important component is the space between subsequent lines Often calling leading 12 pt. font 18 pt. leading

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

Ski n Fun Come with us to the famous resort of Val Disere, 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!

Slide 12

Ski n Fun Come with us to the famous resort of Val Disere, 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!

Slide 13

Ski n Fun Come with us to the famous resort of Val Disere, 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!

Slide 14

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)!

Slide 15

Using Fonts www.fontco.com

Slide 16

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

Slide 17

Using Fonts

Slide 18

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

Slide 19

Using Fonts