Introduction to web fonts and typography
Introduction to web fonts and typography
A glossary of online typography terminology
A glossary of online typography terminology
As an introduction to typography for web design, we’ll introduce you to common and specific terms for web font and online typography design in this glossary. We’ll start with the general typography terminology and a range of terms expressing spacing and height. Then we’ll talk about how to adjust font sizes and spacing in web design using CSS properties, at which point we’ll also go into the use of absolute and relative units.
As a general rule, the number one issue when adjusting font values should be usability, i.e. legibility and readability, to create a pleasant experience for readers or viewers. Any other effects or issues should only come into play after that, for example to brand, to complement images or content, evoke emotions or amplify your message. Neither of these is an exact science, but in terms of legibility, you’ll have an intuitive understanding of what works or “feels right”.
Glossary of the most common typography terminology
Typography
Modular Scaling Of Font Size In Web Design
Modular Scaling Of Font Size In Web Design
Font Terminology For Height And Spacing
Word-spacing
Word-spacing adjusts the average distance between two words, usually for reasons of fitting copy within a certain space or improving legibility.
Typeface vs. Font
A font family: one typeface, many different fonts (source).
Common font weights: 1. Light, 2. Regular, 3. Medium, 4. Bold (source).
Weight
Sans-Serif
Three different styles of sans serifs: 1. Work Sans, grotesque sans serif, 2. Alegreya Sans, humanist sans serif, 3. Quicksand, geometric sans serif (source).
Roman
Italic
Character
Examples of characters (source).
Glyph
Three different glyphs for one character (source).
Serif
Four different styles of serifs: 1.EB Garamond, old-style serif, 2. Libre Baskerville, transitional serif, 3. Libre Bodoni, didone / neoclassical serif, 4. Bitter, slab serif (source).
Body
Lining Figures
Hairline
Antiqua / Old Style
Condensed
Cursive
Display Font
Three different styles of display fonts: 1. Shrikhand, 2. Chewy, 3. Faster One (source).
Oblique / Slanted
The difference between a tilted font and a true Italic font (source).
Baseline
The baseline is the line on which the characters rest (source).
Axis / Stress
Different types of stress in different typefaces for the letter “O” (source).
Ascender Line
x-Height / Midline
The x-height defines the height of lowercase letters such as “x” (source).
Spacing
Font Size And Weight Adjustments In Web Design
Font Size And Weight Adjustments In Web Design
Line-Spacing: Leading
Kerning
Kerning adjusts the spacing for individual character pairings (source).
Letter-Spacing: Tracking
Letter-spacing can be tighter or looser (source).
Descender Line
The ascender and descender line of a font (source).
Cap Line / Cap Height
The cap line is the imaginary line to which capitals extend and the difference between that line and baseline is the cap height (source).
Fully hinted text vs. not hinted text (source).
Hinting is a set of data instructions for a font so that it renders clearly at variable sizes. These guidelines by the font designer achieve greater consistency and legibility in print and on displays, especially at smaller sizes. Hinting for fonts requires time and effort, but most fonts contain some form of it. Quality fonts use manual hinting instead of computer-generated hinting.
Delta hinting describes additional hinting instructions added to a TrueType font, affecting only screen sizes but not printing. Delta hinting is not available for PostScript fonts and dis even more time-consuming.
Hinting
Relevant CSS Units
When designing a web project, two important typography issues will come up. The first is choosing the appropriate typefaces, the second is adjusting the font sizes for your needs. Size usually comes into play as a scale, defining a hierarchy for headlines and body text. The underlying design principle is one of guidance, gently leading the reader or viewer from one element to the next.
CSS has 15 different units for sizing, but only a few of these are suitable for font design and sizing. CSS can express or define sizes in absolute or relative units. The difference is important: an absolute size will always stay the same, whereas a relative size depends on other elements on the same page. Only with relative units can you set your fonts to adjust to different circumstances such as varying screen sizes, creating a responsive design.
To better understand font sizes in web design, let’s look at the “traditional” units first: point and pica. They have their origin and history in typography. For printing and in a word processor, you’ll specify font size in point, for example “12pt Times New Roman”. As a unit of measure, a point corresponds to 1/12 of a pica or 1 pixel. A pica corresponds to 12 points or pixels.
The relation between these absolute units is the following:
1in = 2,54cm = 25.4mm = 72pt = 6pc
CSS will accept absolute units such as inches, centimeters, and millimeters, as well as point and pica. However, due to varying screen resolutions, they might display incorrectly. Furthermore, different screens require different reading distances: you look at a mobile phone close up, yet are further away from a computer screen or a projection. What looks big on a phone screen might appear small on a computer screen.
Relative units help you solve the problem of designing for various screen sizes. The most important two are px and em.
Px
Px is an absolute unit, but not related to physical centimeters or inches. In that sense, it’s sort of “magical”. CSS defines the px unit to be “small but visible”–a horizontal line 1px wide should display with sharp edges (without anti-aliasing). Sharpness depends on the device, and px is therefore not a constant length.
Px comes from the CRT computer monitors in the 1990s. The smallest dot (or “pixel) one of these could display measures about 1/100th of an inch, or roughly 0.25mm. This is where the px unit comes from.
Px corresponds more or less to a little more than the distance from the top of the highest letter to the bottom of the lowest letter (i.e. ascender to descender) in a font. Px is a unit to understand but not use in typography. Relative units will point to other properties that are set in px. For example, the standard font size for a browser or even a device might be set to 16px. You design can point to that in relative units. If the standard changes (because the user changes it in the browser, or the device changes), so does you design–automatically.
Em is defined as the width of the point size. In 12pt type, one em has a width of 12 points. It is therefore a relative unit. If you set a font size of 2em, it would be twice as big as the font-size of its parent element.
16px is a common default font-size for the body element, especially in desktop browsers. Using the Em unit allows you to set typographical elements in relation to font-size and other parent elements.
Em
This unit is used less often than Em, but you can use Ex in much the same way. Ex refers to the x-height of a font instead of its (total) size, like Em does. You can therefore use it to style the size of elements in relation to the height of lowercase letters in a font. Since the x-height varies between fonts, you can use Ex to adjust the size of images and align an image border with the midline, for example.
Ex
Rem
The unit Rem was introduced to further simplify styling rules. Rem refers to “root em” and is the font size of the root element of the document. While Em might change throughout the document, Rem does not.
CSS: font-size
The CSS property font-size allows you to set the size of different font elements, such as body text, headlines etc. It’s common to do this in relation to the default font-size of the body element using the relative unit Em.
CSS: line-height
The CSS property line-height controls the line height of text. It corresponds to a multiple of the defined font size. If the default font size is specified as 16px, a line-height of 1.2em would correspond to a line height of 19.2px. This is also the default line-height for most browsers. A line-height of 1.5 might provide more readability. In general, designers tend to increase line-height for thick fonts, fot fonts of a dark color, and for long-form content.
CSS: letter-spacing
To further affect legibility, you can control letter spacing with the CSS property letter-spacing. It’s also best to express this in relative Em units. Tracking or letter spacing depends on the font in use: ideally your font choice needs no adjustments at all or most sizes.
Letter spacing in web font design can become an issue for very large or very small elements. Typical paragraph size is usually spaced well already. Consider reducing letter spacing for large titles of headlines, whereas adding extra space will commonly only be used as a stylistic element.
CSS: font-kerning
Kerning for specific letter pairs is already specified by quality fonts, so the CSS property font-kerning is set to normal. You can use it to adjust kerning where necessary, but values that work for one font might not be suitable for another.
The Anatomy Of Type
The Anatomy Of Type
Anatomy Of A Typeface (source).
Font Size Scale Ratio
You can use different ratios to see how they look and feel with your design. You can use proportions of the chosen typeface to determine your ratio, draw inspiration from existing web design examples that work well with your fonts. You multiply the ratio with the base to produce a scale of numbers in proportion to the base. You can use a modular scale calculator to automatically see examples and live results.
Old Style / Hanging Figures
Hanging figures are numbers that extend below the baseline (source).
Line-spacing examples: leading can be tighter or looser (source).
Anti-aliasing
Displaying fonts on a screen includes rasterization, that is the conversion of the font information into individual dots or pixels so they can appear on the screen. Because pixels on computer screens are essentially square or rectangular dots, any slanted or curved strokes and elements of characters will appear jagged and with a visible “stair-step” effect.
Anti-Aliasing counters this effect by adding semi-transparent pixels along the edges of characters to smooth out their appearance. This will blur the edges slightly at the cost of contrast, but when done well, anti-aliasing improves legibility. On LCD screens, anti-aliasing can use subpixel rendering for tripling the perceived display resolution. Each color component (red, green, blue) is set separately, resulting in smoother edges. As anti-aliasing requires knowledge of the display in use, it is usually set at the level of the operating system of the device.
Aliasing vs. anti-aliasing: the letter on the right appears smoother thanks to anti-aliasing (source).
Font Size Scale Base
You can use the body text size as a base. Using x-height as a base is less common. From there, you can develop a scale using a fixed ratio. If the height or width of certain images such as banners or logos is important, you could use those as a base.

Start publishing online newsletters like Deloitte, IBM, and Nike.
Get a demo of Readz today - and never look back.

Hi! We really should talk!
We'd love to introduce you to Readz, the publishing platform used by IBM, Nike, Deloitte, Aon and many more.
Hop on the phone with one of our publishing consultants and get customized advice on how to get started.
Create Content Experiences.
Better. Faster.
/ / newsletters
/ / white papers
/ / magazines
/ / content hubs
/ / annual reports
/ / brochures
Related Articles
The best font size for online content
GUIDE
These design errors will kill your conversion rates
FEATURE
5 essential design tips when you move from print to online
GUIDE
Why UX is important for marketing
FEATURE
Stay in the know
Actionable advice on how to create better content & design, delivered to your inbox.
No charge. Unsubscribe anytime.
< BACK TO OVERVIEW