2024/01/29
Typographic Units
Absolute distance
| Name | CSS Unit | length |
|---|---|---|
| Picas | pc | 1/6 inch |
| Points | pt | 1/72 inches |
Font-relative units
em:In metal type, the point size (and hence the em, from em quadrat) was equal to the line height of the metal body from which the letter rises. […] In some older texts, but not all, the em is defined, or said to have been defined, as the width of the capital ‘M’ in the current typeface and point size. […] In [CSS] the em unit is the height of the font in nominal points or inches.
In digital type, the relationship of the height of particular letters to the em is arbitrarily set by the typeface designer. However, as a very rough guideline, an “average” font might have a cap height of 70% of the em, and an x-height of 48% of the em.
Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
historically the em unit was derived from the width of a capital “M” in a given typeface.
ex:x-height of the element’s font.
when setting the font-size property using ex units, the font-size equals the x-height of the first available font used on the page.
Lines & measurements
Cap height
Cap height refers to the height of a typeface’s flat capital letters (such as M or I) measured from the baseline.
ascender _
cap height _______________
/\ |
median _ / \ |
/ /\ \ |
/ ____ \ |
baseline _ /_/____\_\_|_
descender _
x-height
X-height refers to the height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.
ascender _
cap height _
median _____________
\ \/ / |
> < |
baseline ____/_/\_\_|_
descender _
Descender height
ascender _
cap height _
median _ _ __
| '_ \
| |_) |
baseline______| .__/_____
| | |
descender_____|_|______|_
Ascender height
ascender _________
cap height _ | |
| |
median _ | |__
| '_ \
| |_) |
baseline _ |_.__/
descender _
Language categories
For ease of internationalization, Google has categorized languages into three categories: English-like, tall, and dense.
- Tall: Language scripts that require extra line height to accommodate larger glyphs … like Arabic, Hindi, Telugu, Thai, and Vietnamese.
- Dense: Language scripts that require extra line height to accommodate larger glyphs but have different metrics from tall scripts. Includes Chinese, Japanese, and Korean.