Our first two terms are cap height and baseline. Cap height is the height of the capital letters and the baseline is the guideline for which the majority of characters rest.
Next, we have x-height, which is the height of the entire lowercase letterset, and is determined by the height of the lowercase x. A high x-height means the lowercase is larger in relation to the uppercase. Whereas a low x-height means the opposite, it's smaller. When smaller font sizes come into play, a typeface with a high x-height can help retain legibility because the lowercase is larger in relation to the upper case. Let's say you have two different typefaces, and both are set at 12 point size. One could be easier to read than the other due to the higher x-height.
There are also instances where certain areas where some lowercase letters descend below the baseline, and others ascend above the x-height. These are called descenders and ascenders, respectively. For example, a "p" has descender, and a "d" has an ascender. So, how low can descenders go or how high can ascenders climb? In some typefaces, ascenders climb up above the cap height. In others, they sit below. And in some cases, the cap height and ascenders are aligned. This last case, though, can affect readability and letter recognition.
Serifs are projections that finish off the main strokes of a letter. They can sometimes aid legibility and letter recognition. Distinctive character shapes help differentiate letters, and serifs help letters flow. The shape of letters particularly helps those with dyslexia and reading disabilities. Other typefaces forego serifs on their letter forms. These are called sans-serifs, sans meaning without.
Finally, let's talk about contrast. Contrast can relate to a few different things in typography. The first deals with the actual letter forms in a typeface. A typeface with high contrast would have thick vertical strokes and thin horizontal strokes. A typeface with low contrast would have little to no difference in stroke thickness. Contrast can also refer to the actual text and how it relates to the background. Pure black text on a pure white background creates high contrast. Whereas a light gray on a medium gray creates low contrast.
According to the WCAG contrast guidelines, body text color should have a contrast ratio of at least 4.5:1 when compared to its background color. Large text that is 18 points and larger should have a contrast ratio of at least 3:1.
Top comments (0)