body {
.title {
font-family:'SpeziaSerif';
}
.title {
font-weight: 900;
.text {
font-style: italic;
}
.text {
font-weight: 400;
font-style: normal;
}
Angebot
Angebot
Web fonts have been a technology since the mid-90s, but the widespread use of specific typefaces on the internet began around 2010.
Firstly, there are two distinctions to be made: web-safe fonts and web fonts.
Web-safe fonts are default fonts on operating systems, such as Arial.
Since they are installed on all computers, there is no need to link them from a server to display them in a web browser.
A web font, on the other hand, is not a default font on operating systems.
Therefore, a web font needs to be linked from a server. This article primarily focuses on these web fonts.
I will keep this section brief, as I have provided a summary on licensing here. When you wish to use one of my web fonts, you need to purchase a web license first. Thanks to your Web License, you can use the web fonts in all of your web projects.
Your website likely consists of at least one HTML file on a server. In this file, you will either link to a CSS file or have a style tag that contains styling information. Either way, this is where you will define 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 browser. Below you can see an example of my recommended font-face rule for Spezia Serif Regular:
In the rule above, I have linked Spezia Serif Regular in Woff and Woff2. In the CSS, I now define the font-family as SpeziaSerif. 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 important 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, often typefaces require less tracking (letter-spacing) in large font sizes and a bit more in 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 small texts.
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 to a pixel raster. The result of this process can vary depending on the screen resolution, operating system, browser, and font software itself.
It is not possible for a typeface to look identical on every device. However, with increasing screen resolution and improved software, 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 fonts are rendered by the browser. 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 genre as a 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 axes rather than fixed font weights. This new 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 useful 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 0000, 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 opsi (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 important purposes. Below you can see 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. Luzi Type uses 'opsi' for this axis. |
One of the most fascinating aspects of variable web fonts is their flexibility. This flexibility is particularly useful for accommodating the various screen formats on which websites are viewed, ranging 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 began experimenting with web design in 2006, and since then, a lot has changed and much more is now possible. The internet of today offers developers and designers a wide range of possibilities. One crucial aspect is web typography, which includes the layout, text formatting, and the availability of modern digital typefaces.
I hope you find this article helpful. If you have any comments or corrections, please feel free to send me an email.
This essay covers some of the fundamental points of web typography. However, there is much more to this vast subject. An important topic is the responsiveness of web typography and its impact on web accessibility.
Here are some of my favourite articles and presentations:
| developer.mozilla.org | I am a fan of Mozilla; their web docs are excellent and cover a wide range of topics. |
| jensimmons.com | A fantastic presentation by Jen Simmons about Firefox developer tools. Jen also provides many useful tutorials about web design. |
| betterwebtype.com | An interesting article by Matej Latin on fluid web typography. |
| medium.com | An excellent article by Jason Pamental regarding dynamic typography. |
| www.youtube.com | A clever presentation by Jason Pamental about advanced typographic systems with variable fonts. |