pba front-end programming
DESCRIPTION
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: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/1.jpg)
PBA Front-End Programming
Fonts
![Page 2: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/2.jpg)
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…
![Page 3: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/3.jpg)
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
![Page 4: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/4.jpg)
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)
![Page 5: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/5.jpg)
Using Fonts
• Another important component is the space between subsequent lines
• Often calling leading
12 pt. font
18 pt. leading
![Page 6: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/6.jpg)
Using Fonts
• Two main families of fonts• Serif (with ”feet”), aka Antikva• Sans Serif (without ”feet”), aka Grotesque
![Page 7: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/7.jpg)
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
![Page 8: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/8.jpg)
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…
![Page 9: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/9.jpg)
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
![Page 10: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/10.jpg)
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
![Page 11: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/11.jpg)
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!
![Page 12: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/12.jpg)
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!
![Page 13: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/13.jpg)
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!
![Page 14: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/14.jpg)
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)!
![Page 16: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/16.jpg)
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…
![Page 17: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/17.jpg)
Using Fonts
![Page 18: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/18.jpg)
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
![Page 19: PBA Front-End Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568166a8550346895dda9b54/html5/thumbnails/19.jpg)
Using Fonts