menu
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
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.
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.
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.
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.
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.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change the heading's font size*/
h2 { font-size: 2.5rem; }
/* Change the paragraph's font size*/
p { font-size: 17px; }
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