Fonts
Custom fonts come in many shapes and sizes, and I bet you that it will be hard to find a website that isn’t using them at all. For many years web designers have used fonts as a part of their design. Some use it to complement the design, and others to create it. The difference might not sound significant, but it is entirely different. The first is using fonts to “complete” an already existing design and to make it feel professional. And the other one uses custom fonts to create the whole design. Without the fonts, there would be no design or brand. It would just be a page with some text.
In the mid-15th century, Johannes Gutenberg used a unique font in his books called Blackletter. Back then, they didn’t have a digital press, meaning all books were written by hand. It took a long time, and creating multiple copies was demanding. It was also Johannes Gutenberg that later created a printing machine to mass-produce books. Moving the letters around for one page would almost take up a whole day. But once the letters were in order, he could print as many pages as needed. Gutenberg was a goldsmith, and because of that, he was able to create his own printing machine. In 1470 Nicolas Jenson figured that a simpler letterform would result in more text on a single page.
His much simpler letters also resulted in a faster press setup which meant that more books could be printed in a shorter time. This was when the first Roman typeface was created by mixing the Blackletter and the Italian Humanist lettering typefaces. We have been using fonts for many years. But instead of only having a few to choose between, we now have a whole ocean full of different fonts ready to use. Some are free to use on the web, and some cost money. Google, for example, had 915 free fonts in 2020 that you could choose for your web project, so it is only the imagination that sets the limit.
In this lesson, we will look at fonts, how they affect web design, which font formats are often used, and how we can optimize the fonts to take up as little space as possible.
How fonts affect web design
Fonts are commonly used on websites, and I would say that it is uncommon to see a website using standard fonts that come preinstalled on your device. Over the years, fonts have become normal to change, and we have learned to make the text a part of the design. Some designers adjust the fonts to complete a web design or brand, while others use fonts to improve readability. Some even spend months or years inventing a custom font only that specific company has. We all have a reason to be using a particular font, but we cannot run from the fact that some fonts cause pollution because of the extra data. I know I have been saying the word pollution in every single chapter you have been reading, but the fact is that everything we do on the internet is causing pollution in some way, and only by optimizing can we create more sustainable products.
Fonts come in many shapes and sizes. But did you know they come in many file types? Depending on where you are getting your fonts, they might come in a heavier format, and in some cases, a font can weigh up to 10 times the weight of another. In some instances, a font collection for a website can weigh as much as a large image. A font size can also increase if you need different variants, such as cursive or bold. Each time you add a style or weight to a font, you add a variation of it, meaning the font will become heavier. Also, the letters supported by the font will determine its weight.
In the following sections, we will discuss three of the heavier types often seen in web design.
TTF (TrueType Font)
TrueType font was invented by Apple in the 80s and was a competitor to Adobe’s Type 1 font. It offered the developers control of the font down to a single pixel, which meant higher control over how the fonts were rendered. Today it cannot be guaranteed that a developer can control down to a single pixel because of the many ways web browsers render websites. When TTF came out, it quickly became the most popular font format to use on machines, and even today, system fonts that come preinstalled will be in the TrueType format.
