Fonts: a touch of creativity for web pages

As a web designer, it has never been easier to find fonts for a website today. Thanks to the new fonts your creativity has no limits. The fact that there is such a large choice, however, can make it take longer to find the ideal font for your page. The importance of the font should not be underestimated, as with the right combination of characters that reflect the personality of your page and make a good impression even in responsive web design, leave a good impression on the readers.

Table of Contents

Web typography: From standard to modern fonts

The role of typography on the web has changed considerably in recent years mainly thanks to the technological progress and the possibilities that have derived from it. In the trees of HTML and Co. the fonts and their style have been defined based on the settings of the browser used and not on the site code. Only with the <tag> fonts, in the meantime obsolete, the developers have received the necessary tool to insert even more modern characters. Users could only upload their fonts once they were installed on the computer otherwise it was necessary to resort to a “Fallback font” (i.e. a fallback font supported by the browser).

By separating content (HTML) from design tools in CSS and implementing font downloads in the browser, web designers can use fonts to create web pages. They are therefore digitized characters. By loading the page, the user’s browser is informed on which server the relative fonts are located and calls them up. Visitors to the site see the chosen font, even if it is not installed on their computer.

Since the development of the Web Open Font Format (2009), licenses for fonts have been sold to more and more bidders under different conditions. To change are mainly the prices and payment methods as well as the type of hosting (on your own server or on a provider’s server). Due to the competition, which is mainly due to the great importance of typography for mobile devices, there are numerous creative fonts available to designers.

Font categories and their areas of use

The concept of fonts refers to all fonts that are developed according to the same type of design. If there are several variations of a certain type of font, which for example differ in the thickness of the stroke or the spacing, then it is defined as a family of fonts (which include, for example, the characters Segoe UI, Segoe Light and Segoe Semibold, which are part of the same font family).

Different characters are suitable for different areas of use. When choosing a font, you should pay particular attention to two aspects: the legibility of the font and their emotional effect. The medium also has a great importance. In these characters with graces, the individual characters present small elongations at the end of the line which facilitate their reading. For reading on the computer, this font is not always the best solution.

Function and position in the text should influence the choice of the font: while particularly flashy fonts in the titles attract the desired attention, in the text they give a sense of confusion. For this reason, web designers often use different fonts or typefaces (so they are called variants within a family of fonts) in the same text. However, you shouldn’t overdo it, as the pages are otherwise heavy and difficult to load.

Even as regards the effect, the individual fonts differ a lot from each other. The following table gives an overview of which characters are suitable for certain types of text and which associations they induce in the reader.

Using unexpected fonts is an effective means of standing out from the competition. To find suitable fonts, you should follow these tips:

In choosing the theme and the target should consider that a combination of creative fonts that is also convincing from a visual point of view is useless if it is not suited to the theme of the site. A coherent text organization should contain a mix of characters with thanks and without thanks. Calligraphies are more eye-catching and have a more decorative effect. They also add a touch of personality to your page, but should be used in moderation. Italics are often used for special occasions such as weddings or birthdays.
The more text there is on a page, the more importance you should give to functionality. Along with good readability, you should also consider that users of mobile devices will view your site in a standard way using a mobile data connection which, in the presence of too particular and rarely used characters, will unnecessarily increase the loading times.
Limit the number of characters used. As a rule, the use of two different fonts is limited one to the body of the text and the other to the title and other special typographical symbols.
Look for fonts that differ and create good contrast. A combination of characters with and without graces could be a solution. However, be careful to maintain the right proportion: if the fonts chosen are stylistically different from each other, there is a risk of creating an unpleasant effect that the visitor will certainly notice. If the fonts are too similar, however, it creates an equally negative effect.

How to find creative fonts for your page

Modern font providers sell digital fonts with different license models, thanks to which you can pay either in one go or for the duration of use of the font. In the first case, you host the fonts yourself, in the second you usually receive a link to the provider’s server where the fonts are saved. In addition to paid fonts there are also a number of open source fonts, which are however used by many web designers.

If you want to create and optimize your site with new and original fonts, you should compare the offers of different font suppliers. In this list, we suggest some very interesting ones:

Google Fonts: free Google font service with over 100 different copies and preview functions.
Adobe Edge Webfonts: in the free collection of fonts made available by Adobe you will find over 500 modern styles to be used for free.
Squirrel Font: supplier with hundreds of fonts also suitable for advertising, which can be downloaded for free; on this link you will also find a generator for some fonts.
com: paid provider of over 2000 different font families; monthly pass and various promotions.
Linotype: hundreds of fonts for the web, desktop or server, obtainable individually or in a package; with free preview tool.
Misprinted Type: almost 50 free original fonts, downloadable individually or in a package.
MyFonts: different fonts obtainable through single payment or after 30 days of trial; with WhatTheFont you can find out which font it is by sending a photo.