-
Notifications
You must be signed in to change notification settings - Fork 0
General Topics: Typography
Units. Printed type is measured in picas and points, with horizontal spacing measured in ems, wherein an em is a proportional unit. One em is a distance equal to the type size (e.g. in 12 point type, one em is 12 points).
A pica is a typographic unit that = 1/6", or 1/68 – 1/73'. There are 12 points in 1 pica (1pt = 1/72"). In Adobe applications represent them like so: 5p3 = 5 picas, 3 points (5.25 picas). In CSS, picas are referred to by pc and points pt.
Sources:
Numerals, Capitals, and Small Caps. Bringhurst recommends small caps for typefaces with fine features and small x-height and full caps otherwise. Genuine small caps are specially designed and not shrunken versions of full caps.
Sources:
(character counts <> measures: p29)
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 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:
Computer Fonts. Three main types, though we usually deal with the second:
- Bitmap (pixel, raster) fonts comprise a matrix of dots (i.e., pixels) that represent the image of each glyph in each face and size. Often for low-resolution displays.
- Vector (outline) fonts are scalable and specified using Bézier curves that define the outline of each glyph.
- TrueType: a font system originated by Apple; quadratic Bézier curves describe glyphs.
- OpenType: developed by Microsoft and Adobe; OT fonts contain outlines in TrueType or CFF (compact font format), with a wide range of metadata.
- Stroke fonts are specified by a series of lines.
Anti-aliasing. A technique that minimizes the jagged effect (aliasing) of diagonal and curved lines in graphics (e.g. serifs) by adding semi-transparent pixels to achieve an illusion of continuity. While anti-aliasing smooths out text, the legibility of the text is not guaranteed.
Font hinting. AKA instructing. A technique that involves determining which pixels to grayscale so that the font lines up with a rasterized grid. It can help maintain contrast, increase legibility, create spacing, and maintain a plain (uniform) text line. Especially needed for vector fonts.
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.
Subpixel rendering. Another technique for low DPI displays that is often combined with anti-aliasing and hinting to improve text legibility: because each pixel comprises 3 subpixels R, G, and B, turning on certain subpixels can improve perceived monitor resolution. Subpixel rendering relies on a perfectly aligned grid of pixels, which makes this an LCD FPD-exclusive technique.
Sources:
- Smashing Magazine, "The Ails of Typographic Anti-aliasing" (2009)
- TrueType Typography, "TrueType and Anti-Aliasing"
- TypeType, "Hinting"
- TrueType Typography, "Hinting"
- Wikipedia, "Font hinting"
- Wikipedia, "Subpixel rendering"
Readability: measures and paragraph spacing, zoning