Scribd
Upload
88 views

Summary CSS Font Sizes

A summary from various sources of what types of font sizing mechanisms we can use in Web Design. Contains references to other articles online.

Uploaded by

Carsten Altena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
88 views

Summary CSS Font Sizes

A summary from various sources of what types of font sizing mechanisms we can use in Web Design. Contains references to other articles online.

Uploaded by

Carsten Altena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Summary CSS font sizes

PRACTICAL: The 65.5% solution


By setting html { font‑size: 62.5%; }, 1em = 10px. Then you can do h1 { font‑size:
2.4rem; } = 24px
More coders seem to be using this technique.
It is accurate but adapts to the device's idea of a "pixel" I guess.

BEST: The "set base size at root" solution,


size with em
If your base font is 12px, just set your base at 12px in the first place (body{ font‑
size:0.75em; }) then:
You don’t need to define every element individually; you style the exceptions rather
than rewriting the rule.
You don’t get crazy‑annoying inheritance issues.
BUT it's more convenient if your design is more pixel perfect to use 65.5%.

Preprocessor solution: set base 100% and


compute
Working all of these numbers out in your head would be pretty time consuming.
Thankfully, if you use Sass/SCSS, LESS, or any other CSS pre‑processor, you
shouldn’t worry. You can use functions to calculate these things for you.

Use both EM and REM


use rems to scale something with the page (global sizing)
use ems to scale within a component (local sizing).

Other thoughts and ways


PX is most accurate and consistent but not responsive without media queries.
Viewport based is automatically responsive, but with very narrow screens fonts get
too small. But we can use calc() to set caps on how small and large the font can be.
font‑size: calc([minimum size] + ([maximum size] ‑ [minimum size]) * ((100vw ‑
[minimum viewport width]) / ([maximum viewport width] ‑ [minimum viewport
width])));
font‑size: calc(14px + (26 ‑ 14) * ((100vw ‑ 300px) / (1600 ‑ 300)));

Read
https://medium.com/code‑better/css‑units‑for‑font‑size‑px‑em‑rem‑79f7e592bb97
https://snook.ca/archives/html_and_css/font‑size‑with‑rem
https://css‑tricks.com/books/volume‑i/scale‑typography‑screen‑size/
https://css‑tricks.com/rems‑ems/
https://css‑tricks.com/rem‑global‑em‑local/
https://csswizardry.com/2011/05/font‑sizing‑with‑rem‑could‑be‑avoided/
https://engageinteractive.co.uk/blog/em‑vs‑rem‑vs‑px

PX
best thought of as "device pixels" as this length doesn't have anything to do with the
literal screen pixels in the display you are looking at.
It's actually an angular measurement.

EM
A relative unit.
Originally a typographic measurement based on the current typefaces capital letter
"M".
em units multiply upon themselves when applied to font‑size
if an element with font‑size 1.1em is within an element with font‑size 1.1em within yet
another element with font‑size 1.1em, the resulting size is 1.1 ✕ 1.1 ✕ 1.1 == 1.331rem

REM
relative unit, like em, but it is always relative to the "root" element
Widely supported, in all modern browsers, even IE11.

VW / VH
"viewport width" or "height" unit.
1vw is equal to 1% of the width/height of the viewport.
Good support, only IE11 doesn't support vmax

vmin
This value will be whichever is smaller at the moment, vw or vh.
In the standard use case of sizing type, this may be a more useful metric than vw or
vh on their own in determining true screen size.

vmax
This value will be whichever is larger at the moment, vw or vh.
IE11 does not support vmax

%
based on the length of same property of the parent element

Ex
1ex would be equal to the computed height of the lowercase letter x of the root
element.

Ch
The ch unit is similar to the ex unit in that it will set the font‑size of an element in
relation to the width of the 0 (zero) glyph of the font:

You might also like