Going beyond pixels and (r)ems in CSS – Relative length units based on font – iO tech_hub
February 7, 2024
There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples of where they could come in handy. I will create a mini-series out of this and for the first part, let’s start off with relative length units based on font
Source: Going beyond pixels and (r)ems in CSS – Relative length units based on font – iO tech_hub
Most of us I’m sure (sheepishly raises hand) have for too long relied on em and rem units for stying text. But there are many other units for sizing text that may come in handy
- The cap unit measures the distance from the baseline to the top of capital or uppercase letters
- The ch unit represents the advanced measure of the character 0 (zero) in the font used to render it
and more!
