04. Font size

The font-size property

To specify an element's font size, use the CSS font-size.

Remember from our Fundamentals of Length lesson that we can use pts, px, %, em, or vw.

Use pts and px if you want to be exact, and use %, em, or vw to have your font be relative to another element. Additionally, we can use vw and vh for the size to be relative to the user's viewport window.

Text size should almost never be specified in pixels. Rather, we should use a relative unit (eg. em), to ensure proper contrast. Remember the magic formula:

context / default = result

Type Scales

Type Scales are a set of ratio that was developed by European typographers in the 16th century. Rather than use font sizes that were all over the place, they decided to standardize specific sizes. Eventually they came up with a list of text sizes that were pleasing to the eye.

The 12 pixel scale

An example of this is the 12 pixel scale:

6pt

7pt

8pt

9pt

10pt

11pt

12pt

14pt

18pt

21pt

24pt

36pt

48pt

60pt

72pt

Build modern and responsive webpages

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Aching back from coding all day?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

Ad