Web-fonts as a technology has been around since the mid 90s. However, the broad use of individual typefaces in the internet started around the year 2010.
There are two distinctions to be made in the first place; web‑safe fonts and web‑fonts.
Web‑safe are default fonts on operating systems, e.g. Arial.
Since they are installed on all computers, they do not have to be linked to form a server to be displayed in a web browser.
A web‑font is a font who is not a default font on operating systems.
Due to this a web‑font has to be linked from a server; this article is mostly about these web‑fonts.
I try to keep this section brief, since I have a summary on licencing here. When you like to use one of our web‑fonts, you need to purchase a web‑licence first. Thanks to your Web Licence you can use the web-fonts in all of your web projects.
Your website probably consists of at least one HTM‑file on a server. In this file you’ll either link to a CSS-File or have a Style tag that contains styling information. Either way, this is where you’ll define the @font-face rule.
There are different web‑font formats, we deliver our fonts as Woff and Woff2.
This covers you fully in all today’s used browser.
Below you can see an example of our recommended font-face rule for Spezia Serif Regular:
In the rule above we linked Spezia Serif Regular in Woff and Woff2. In the CSS we define the font-family now as SpeziaSerif. If you like to link another font-weight, you can add another rule. For example, Spezia Serif Black Italic would be;
The last aspect is the unicode‑range.
This adjustment sets the specific range of characters to be used at your HTML‑page.
In case 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 is downloaded.
This is helpful if you have different fonts used one your website.
In generall, you don’t need to include the unicode‑range in your @font‑face rule.
We have set up a test HTML‑file for each of our fonts.
When you download our trial fonts or purchase a font, you will receive an individual template HTML‑file.
With the @font‑face rule in place we have properly linked the web-font to the HTML. Let’s make an example in CSS; now we set our titles to Spezia Serif Black Italic and our text to Spezia Serif Regular;
An important aspect of using a font on a website is the CSS setting.
Without going too much in detail, here are some things to consider.
The letter‑spacing which controls the overall amount of space between each letter.
As in desktop usage, often typefaces need in large font‑size less tracking (letter‑spacing) and in small a bit more.
The line-height defines the amount of space above and below each line of text. General, like in print; lager titles need a bit less line‑height than small texts.
With the font-feature-settings users can control OpenType features. You can see the available OpenType features of all our fonts within the type tester.
| liga | standard ligatures |
| dlig | discretionary 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 |
| small caps | 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 only can have one set of figures active.
Also with the font-feature‑settings you 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 to a pixel raster.
The result of this process differs, depending on screen resolution, operating system, browser and the font‑software itself.
Generally, it is not possible that a typeface looks identical on every device.
Nonetheless, with increasing screen resolution and better software, these differences are getting smaller every year.
There are two options for users to adjust this process. The font‑smoothing property controls the application of anti‑aliasing when fonts are rendered by the browser. This only works on OSX, however I would consider this option for fonts‑weights heavier than book. Thin font‑weights can get to fine.
The text-rendering CSS property lets the browser know what to optimise for when rendering text. I would recommend the option optimizeLegibility. Like this, the browser emphasises legibility over speed. The difference with this CSS property is sometimes difficult to spot. This option also activated all ligatures, so maybe this is not in your intent.
When a web-font is not fully loaded, we can define a web-save fallback font. This web-save alternative will be displayed before our web-font is completely loaded. In my opinion it is sufficient to have one web-save and one generic font-genre as fallback.
| Beirut Display | Georgia, serif; |
| Beirut Text | Georgia, serif; |
| Buenos Aires | Arial, sans-serif; |
| Cádiz | Arial, sans-serif; |
| Faro | Arial, sans-serif; |
| Koper | Times New Roman, serif; |
| Livorno | Georgia, 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 Display | Georgia, serif; |
| Recife Text | 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; |
| Yport | Arial, sans-serif; |
Variable fonts are used with axis rather than fixed font weights.
This new format opens a new range of possibilities for web typography.
In case you are also curious about the design and technical aspects of variable fonts have a look at an early blog entry Type; a Design Space.
Internet bandwidth limits the use of a wide range of font‑weights on one website.
Variable fonts are an useful addition to the standard web-fonts.
For example, Spezia Serif Complete Upright is one single lightweight font‑file of 175KB.
This variable font contains all weights, all widths and all optical sizes of this super‑font‑family.
To illustrate this Spezia Serif Complete Upright is equal to a typeface with more than 72 font-weights (approximated 2448KB), you can try it below.
A variable web‑fonts 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 via the font‑variation‑settings.
In the first example below you can see 'wght' is set to 0000.
This sets this example to the most light.
In the second example below 'wght' is set to 1000, which makes it the most bold.
The value 'wght' stands for weight, or in other words is the weight axis.
As you see below we have there three axis; 'wght' (weight) wdth' (width) and 'opsi' (optical size).
These axis can have a random name (given by the type designer), however there are so called registered axis. Variable‑fonts often use registered axis since they include the most important axis purpose.
Below you can see two set‑ups 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. Luzi Type uses 'opsi' for this axis. |
One of the most interesting aspects of variable web‑fonts is its flexibility.
This comes in handy to deal with the different formats websites are consumed today, from a smart‑watch up to a desktop computer.
Below we have two examples, the first makes the font narrow as the format gets less wide.
The second example changes the optical size, as the format gets smaller the font is getting optimised for small size.
There are quite view options to manipulate a variable web‑font including with JavaScript.
This would go beyond my expertise and the scoop of this article.
Let’s stick with a pure CSS option.
A good way to auto-adjust a variable web‑font is via CSS @media rule.
With the @media rule: we can apply different styles for different device sizes.
By making the browser window smaller, the example below automatically gets narrower.
I started experimenting with web-design back in 2006. Since then a lot has changed and much more is possible. The internet of 2022 gives developers and designers a large range of possibilities.
An important factor plays web-typography; the layout, how the text is set and the quality of modern digital typefaces.
I hope you find this article useful.
In case you have any remarks or corrections, feel free to send me an email.
This essay should cover some of the basic points of web typography.
Obviously, there is much more to this brought subject.
A big topic is the responsiveness of web typography and its implications for web accessibility.
Here are some of my favourite articles and presentations;
| developer.mozilla.org | I am a Mozilla fan, they web docs are excellent and covers a lot of topics | jensimmons.com | a great presentation from Jen Simmons about firefox developer tools, Jen also has lots useful of tutorial about web design |
| betterwebtype.com | a interesting article from Matej Latin fluid web-typography |
| medium.com | an exelent article from Jason Pamental regarding dynamic typography |
| www.youtube.com | a clever presentation from Jason Pamental about advanced typographic systems with Variable Fonts |