font-size

font-size

font-size is the CSS property that specifies the size of your text element, and it comes with lots of different units of measurements we can use to make our text easier to read and aesthetically pleasing.

taught by Tina May

font-size can be set with pixel unit

You can use the most common unit to set a font size, which is the pixel (px).

font-size:

Tip: Pixel is an absolute unit - it doesn’t scale, so how big it is will always be the same everywhere.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

font-size can be set keyword values

You can use different absolute size-based keywords that equal to certain size in pixels, depending on the type of the font. The keywords are xx-small, x-small, small, medium, large, x-large and xx-large.

font-size:

Tip: In a normal scenario, xx-small = 9px, x-small = 10px, small = 13px, medium = 16px, large = 18px, x-large = 24px and xx-large = 32px.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

font-size can be set with rem unit

You can use rem which is always relative to the font-size of the html selector. If we set the html font size to 16px, then 1rem = 16px. And if we say 2.5rem anywhere, then it’s going to equal to 40px (2.5 x 16).

font-size:

Tip: Rem is helpful for responsive typography because it works like a scale to set the font size - you just change the html font-size on each screen size and everything else will scale up/down in proportion.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

font-size can be set with nested relative units (not recommended)

Em and percentage are nested relative units and they add up based on the parent element's font size. But they can surprise you with weird font sizes if the parent element's font size is changed.

font-size:

Tip: Em and percentage can be even more confusing if the element is nested within multiple parent elements with different font sizes.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<div>
  <h2>Oh hey guys!</h2>
  <p>What's brewing, good looking?</p>
</div>

Oh hey guys!

What's brewing, good looking?

CSS

/* Change the heading's font size*/

h2 { font-size: 2.5rem; }

/* Change the paragraph's font size*/

p { font-size: 17px; }

reults

Try changing the font size of our heading and paragraph below, using either pixels, rems, ems and keyword values.

Try these (or anything else!):

Copyright 2023