Although web fonts have existed since the mid-1990s, it was not until around 2010 that particular typefaces became widely used on the internet.
Firstly, it is essential to distinguish between web-safe fonts and web fonts. Web-safe fonts are those installed by default on operating systems—examples include Arial, Times New Roman and Verdana. Because these fonts are already present on virtually every computer, there is no need to load them from a server; a browser can display them immediately.
By contrast, a web font is not installed by default and must be retrieved from a server.
Whenever a website uses a web font, the font files must be linked so the browser can download and render them. This article focuses almost entirely on such web fonts.
I will keep this section succinct, as a more detailed summary on licensing is provided here. If you wish to use one of my web fonts, you must first purchase a Web Licence. Once you have a valid Web Licence, you are free to employ the web fonts in any of your web projects.
Your website is likely composed of at least one HTML file stored on a server. Inside that file, you will either reference an external CSS file or include a style tag containing your styling information. In either case, this is where you declare the @font-face rule.
There are different web‑font formats; I deliver my fonts as Woff and Woff2. This covers you fully in all today’s used browsers. Below is an example of my recommended font-face rule.
In the rule above, I have linked Spezia Serif Regular in Woff and Woff2. In the CSS, I now define the font-family as Spezia Serif. If you would like to link another font weight, you can add another rule. For example, linking Spezia Serif Black Italic would be as follows:
The final aspect is the unicode-range. This adjustment sets the specific range of characters to be used on your HTML page.
If the HTML page does not use any character in this range, the font will not be downloaded.
If at least one character of the Unicode range is needed, the complete font will be downloaded.
This is helpful if you have different fonts used on your website. In general, you don’t need to include the unicode-range in your @font-face rule.
I have set up a test HTML file for each of my fonts.
When you download my <trial fonts or purchase a font, you will receive an individual template HTML file.
With the @font-face rule in place, I have properly linked the web font to the HTML. Let’s provide an example in CSS; I will set our titles to Spezia Serif Black Italic and our text to Spezia Serif Regular.
An essential aspect of using a font on a website is the CSS setting. Without going into too much detail, here are some things to consider.
The letter-spacing controls the overall amount of space between each letter. In desktop usage, typefaces often require less tracking (letter-spacing) at large font sizes and a bit more at small sizes. Find more information about this topic at my notes entry Let’s talk about space.
The line-height defines the amount of space above and below each line of text. Generally, like in print, larger titles need a bit less line-height than
With the font-feature-settings, users can control OpenType features. You can see the available OpenType features of all my fonts within the type tester.
| liga | standard ligatures |
| dlig | discr. ligatures |
| onum | old style figures |
| lnum | lining figures |
| tnum | tabular figures |
| zero | slashed zero |
| kern | kerning |
| frac | fractions |
| sups | superscript |
| subs | subscript |
| smcp | small caps |
| calt | contextual alternates |
| ss01 | stylistic set 1 |
| ss02 | stylistic set 2 |
Below, you can see how to combine various font-feature settings.
Some combinations are not possible, e.g., old-style figures and tabular figures. This is because you can only have one set of figures active.
Also with the font-feature-settings, you can turn on kerning. The kerning adjusts individually the space between two letters. This makes words more balanced and optimises legibility; I always recommend turning on the kerning.
Font rendering is the process of converting vector letters into a raster image. The result of this process can vary depending on the screen resolution, operating system, browser, and font software itself.
A typeface can’t look identical on every device.
However, as screen resolutions increase and software improves, these differences are becoming smaller every year.
Users have two options to adjust this process. The font-smoothing property controls the application of anti-aliasing when the browser renders fonts. This option only works on macOS. I would recommend considering this option for fonts with weights heavier than book. Thin font weights can appear too fine without it.
The text-rendering CSS property allows the browser to optimise text rendering. I would recommend using the option optimizeLegibility. This option prioritises legibility over speed. The difference with this CSS property may be difficult to spot at times. However, please note that this option also activates all ligatures, so it may not be suitable for every use case.
When a web font is not fully loaded, I can define a web-safe fallback font. This fallback font will be displayed before my web font is completely loaded. In my opinion, it is sufficient to have one web-safe fallback and one generic font fallback.
| Albaro | Times New Roman, serif; |
| Beirut | Georgia, serif; |
| Buenos Aires | Arial, sans-serif; |
| Cádiz | Arial, sans-serif; |
| Faro | Arial, sans-serif; |
| Koper | Times New Roman, serif; |
| Lynstone | Tahoma, sans-serif; |
| Messina Modern | Georgia, serif; |
| Messina Sans | Arial, sans-serif; |
| Messina Sans Mono | Courier New, monospace; |
| Messina Serif | Georgia, serif; |
| Nantes | Times New Roman, serif; |
| Recife | Georgia, serif; |
| Spezia | Arial, sans-serif; |
| Spezia Mono | Courier New, monospace; |
| Spezia Condensed Black | Impact, sans-serif; |
| Spezia Serif | Georgia, serif; |
| Termoli | Georgia, serif; |
| Valizas | Arial, sans-serif; |
| Yetson Sans | Georgia, serif; |
| Yetson Sans | Arial, sans-serif; |
| Yetson Mono | Courier New, monospace; |
| Yport | Arial, sans-serif; |
| Zeist | Arial, sans-serif; |
Variable fonts are used with axes rather than fixed font weights. This format opens up a range of possibilities for web typography. If you are curious about the design and technical aspects of variable fonts, take a look at an early notes entry Type: A Design Space.
Internet bandwidth limits the use of a wide range of font weights on one website. Variable fonts are a helpful addition to standard web fonts.
For example, Spezia Serif Complete Upright is a single lightweight font file of 175KB. This variable font contains all weights, widths, and optical sizes of this super font family. To illustrate, Spezia Serif Complete Upright is equivalent to a typeface with over 72 font weights (approximately 2448KB). You can try it below.
A variable web font can be linked as a normal web font with the @font-face rule as described above. The variable web font can be adjusted with CSS using the font-variation-settings.
In the first example below, you can see wght is set to 0001, making it the lightest option. In the second example below, wght is set to 1000, making it the boldest option. The value wght represents the weight axis.
As you can see below, I have three axes: wght (weight), wdth (width), and opsz (optical size). These axes can have random names given by the type designer, but there are also registered axes. Variable fonts often use registered axes as they encompass the most critical purposes. Below are two setups of Spezia Serif Complete Upright.
| wght | weight; changes the font-weight of the typeface |
| wdth | width; changes the width of the typeface |
| slnt | slant; makes the typeface from upright to oblique |
| ital | italic; makes the typeface from upright to a distinct inclined version |
| opsz | optical size; adjust a font to its perfect version corresponding its size. |
One of the most fascinating aspects of variable web fonts is their flexibility. This flexibility helps accommodate the various screen formats on which websites are viewed, from smartwatches to desktop computers.
Below, I have two examples. The first example narrows the font as the screen width decreases. The second example adjusts the optical size, optimising the font for smaller screens.
There are several options for manipulating a variable web font, including using JavaScript. However, this is beyond the scope of this article and my expertise.
Let’s focus on a pure CSS option. An effective way to automatically adjust a variable web font is by using the CSS @media rule. With the @media rule, I can apply different styles for different device sizes.
As the browser window size decreases, the example below automatically becomes narrower.
I hope you find this article helpful. If you have any comments or corrections, please feel free to send me a message.