In 2020, web designers will, for the most part, continue focusing on what they did in 2019: user-friendliness. Web design trends continue to be shaped by the mobile revolution, which has forced web designers to have a rethink: screens have become smaller and now the internet has to follow suit. We reveal 8 trends that show how much web design will evolve in 2020.
Times are a-changin’ in the world of typography, and it’s now easier than ever to find cool fonts to enhance your website with. Modern fonts allow web designers to be practically unlimited in their creativity. As a result, website owners are spoiled with the immense range of fonts that are now available; although the downside of this is that it can take longer to find the perfect typeface. However, it’s worth investing time in this task, as fonts are an incredibly significant factor in creating a positive impression on users. The right combination of engaging and creative fonts will not only aid you in moulding your image: it can also express the character of your site or products.
From browser fonts to modern fonts: the evolution of typography
The role of web typography has changed radically in recent years, largely due to ever-advancing technology and its endless possibilities. In its infancy, the internet was only able to support characters and typefaces defined by the settings of an individual browser. Only with the now- outdated tag <font> could web developers integrate their chosen font. However, these had to be installed on their computers first, or they would be converted to a ‘fall-back font’–generally a limited selection of standard browser fonts.
The world of web design has been shaken up in recent years due to content (HTML) breaking apart from cascading style sheets (CSS). Consequently, fonts are now downloaded and implemented via web browsers, meaning web designers can now use ‘web fonts’, or digitised fonts, when building sites. When accessing a page, the browser retrieves a font by reading which server it’s located on. This way, website visitors can see the chosen font, even when it isn’t installed on their computer.
Since the emergence of web open font format (2007), an ever-increasing number of providers have started offering web font licenses, each of them with different terms and conditions. These vary above all in price and payment method, or in the type of hosting (whether they are located on a personal server or a provider’s server). Creating typography for mobile devices is becoming increasingly important. Therefore, to keep up with the competition, designers benefit from creating a number of modern fonts for users to choose from.
Web font categories and their applications
The concept of font can be summed up as an entire set of characters that have been created according to a common design concept. If there are several variants of one typeface that differ slightly with regard to their line width or spacing, these then are referred to as a font family, or font face. For example, Segoe UI, Segoe Light, and Segoe Semibold belong to the same font family.
Different fonts are suited to different uses. When choosing the best typeface for a project, the two most important factors to bear in mind are the readability of the font and its emotional effect. The medium that the text is to be read on also plays a large role. For example, with serif fonts, every character has a small stroke at each end; this feature makes it easier to read small printed texts. On the other hand, this font is not always ideal for texts read from monitors.
The function and placement of texts are two other factors that ought to influence your decision when choosing the ideal font. While especially flamboyant, creative fonts in headlines can attract more attention, they often look out of place in the main text. This is why web designers generally use many different fonts or faces in one text. Nevertheless, it’s important not to use an excessive number of fonts, as this will leave the page looking cluttered.
Fonts also differ greatly from one another when it comes to their emotional effect on the reader. The following table gives some examples of fonts, the texts they are especially suited to, and what associations they might trigger with readers.
The properties of the different font categories listed here only convey general impressions. In practice, the use of unexpected fonts is often a great way to stand out from the competition. To find the appropriate font, you should follow the following tips:
- Keep in mind your theme and target group: a visually appealing combination of creative fonts is useless if they don’t fit the website’s theme. A mixture of serif and sans-serif fonts are most likely to convey practical matters, whereas handwriting styles are somewhat showier and have a livelier effect. While the latter offer a more personal touch, they should be used sparingly so as not to diminish their effect. Cursive fonts are often used for more ceremonious occasions, such as on wedding invitations or birthday cards.
- The more text your webpage has, the more you should prioritise functionality. As well as good readability, you should be aware that users accessing your site on mobile devices generally load the page using mobile data, and unconventional fonts can lead to unnecessarily long loading times.
- Restrict the number of fonts used. Generally the best texts have a combination of two different fonts; one for the main text and another for headlines and special typographical tags.
Look for different fonts that contrast and complement each other. The interplay between serif and sans-serif is a good example of this. But do everything in moderation: if the fonts clash, it causes stylistic tension the website visitors will surely notice. On the other hand, if the fonts are too similar, the text will look disjointed, which could also have negative effect on the reader.
How to find creative fonts for your website
These days, there are countless designers and companies, selling cool fonts with different kinds of licenses. You can decide for yourself whether to go for a provider that offers a one-time payment for purchasing the font, or whether you simply pay for the duration of its use. The former allows you to host fonts yourself, while with the latter, users receive a link to the server where the font is located. In addition to fee-based fonts, there’s also a series of open source fonts, although these tend to be used by a lot of web designers, so those fonts can be quite predictable and they won’t make your website look particularly unique.
If you want to create or optimise your website with unique, new fonts, it is important to compare offers from different font providers. The following list gives details on a few different services:
- Google Fonts: a free font service from Google with over 100 different font families and different preview functions
- Adobe Edge Webfonts: No subject? No period? the Adobe service offers over 500 modern fonts free of charge
- Font Squirrel: a provider with hundreds of fonts that can be downloaded free of charge. It also has a generator for creating your own fonts
- fonts.com: this website boasts over 2000 different font families that can be downloaded for a monthly fee. Also offers various special promotions
- Linotype: thousands of web, desktop, and server fonts that can purchased individually or in a package. Has a free preview tool
- Misprinted Type: Around 50 partly free, creative fonts, available individually or as a package
- MyFonts: diverse fonts that are mostly available for a one-time payment and have a 30-day trial period. There is also a function called WhatTheFont, which can identify fonts from an image