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

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ 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