CSS Ruler

Ever used a 'ch' or 'ex' unit in your CSS? Neither have I. Anyway, it's nice to know they exist.

This CSS ruler displays all the valid CSS length units available. When you hover over each unit it reveals a description of that unit. Here are some fun facts I learned while making this:

  • Percentage is not an actual "length" unit according to MDN.
  • EMs are actually just a shorthand for font-size, so if your font-size is 16px, 1em=16px, no matter what font you use.
  • Pixels are generally calculated at 96 px = 1 inch, whereas points are 72 pt = 1 inch.

See the Pen CSS Ruler by Jan Drewniak (@j4n) on CodePen.