-
Notifications
You must be signed in to change notification settings - Fork 0
General Topics: Typography
Variable font axes: weight, width, style, etc.
Type sizes on the web. We may specify type sizes using absolute (fixed) units or relative (flexible) units. Relative units are scalable and help bolster responsive design. In CSS, an em (the term is derived from traditional metal typesetting) is a unit of font size that is relative to the element's parent and compounds as the parent element's font size changes. For example, a <p> paragraph in an <article> may grow proportionally smaller based on the size of <article>. A rem (r for root) is based on the font-size of the root element, i.e. <html>. If <html>'s font-size is not specified, most browsers assign it a default value of 16 px.
Type scales. Aim for a modular scale. Using proportions and values from the typographic system to determine the amount of whitespace/padding/spacing between non-typographic elements helps reinforce the composition.
Sources:
for further reading: spatial design systems/modular scales https://web.archive.org/web/20230315022117/https://www.designsystems.com/space-grids-and-layouts/
Vector v. bitmap fonts.
Anti-aliasing. Anti-aliasing is a technique that minimizes the jagged effect (aliasing) of diagonal and curved lines in graphics (e.g. serifs) by shading the pixels affected. While anti-aliasing smooths out text, the legibility of the text is not guaranteed.
Font Hinting. AKA instructing. A technique that adjusts the display of a font to line up with a rasterized grid. It can help maintain contrast, increase legibility, create spacing, and maintain a plain (uniform) text line.
The TrueType Reference Manual suggests that for screen viewing, fonts should be readable at 9 points per em at 72 ppi, with especial attention to the font's cap height, x-height, and baseline.
Sources:
Readability: measures and paragraph spacing, zoning
Legibility: (anti-)aliasing, font hinting