This document discusses font selection and pairing for websites. It recommends using a serif font for print and a sans-serif font for web content due to their contemporary feel. When pairing fonts, the document suggests using two types - one for headings and one for body text, or combining a serif and sans-serif font. Fonts should create a visual hierarchy with titles being the largest, boldest size followed by smaller subheadings and body text. Headings should be 2 times larger than the body font size to ensure clarity and readability.

1. Fonts selection
for website

2. Farehan Binti Umar
Zanika Adleena Binti Malik
Haizatul Aziah Binti Hafidzuddin Norbi

3. Fonts type

4. - serif, little extenders sticking off the edge of each stroke
- used in print
- have traditional feeling

5. Jon Tan – headlines (Baskerville)
- body copy (Georgia)

6. - do not have extenders
- common on web
- contemporary feel

7. WWF website

8. - have extenders, thick, square-ending strokes
- modern mixed in with traditional

9. Big Omaha

10. Studionudge.com

11. - have same amount of horizontal space
- not advised for body copy on web
- can be used for titles, subtitles or quotes
- typically used for links or instructions

12. - evoke handwriting
- intended for decorative
- can be used for titles, subtitles or quotes
- not suitable for body content

13. How to pair fonts?

14. 1. Stick with just 2 types of font
| One font for headings and titles
| Another font for body content

15. 2. Combine a serif font and sans
serif font

16. 3. Create hierarchy
| Titles and headings:
| bold
| thicker
| largest font on page and not similar with other
element size font (20-32 pixels)
| Subheadings:
| Smaller than title
| Sizes should correspond with importance
| Body:
| large enough to be readable (14 and 16 pixels)

17. Heading to body font-size ratio
| Font size of heading font is 2 times bigger than body
copy
| Fibonacci sequence : 16-24-40-64-104
Heading font size ÷ body copy font size = 1.96

18. Wilson Miner – headlines use massive font size

19. Typographica – introductory paragraphs uses
large font size

20. 4. Create clear contrast by
combining
Wide and condensed fonts UPPERCASE and lowercase fonts
Fancy and simple fonts Contrast colours

21. Thank You