Choosing typography may seem like a trivial task, but it is one of the most important decisions we have to make when designing a website. In this article, we want to offer you some clues about the use of different sources on the Internet, together with some interesting concepts such as pixelization, antialiasing or hinting. And, of course, the most useful: some resources in which you will find the fonts that best fit into your web project.

Each typographic family has its own personality. There are strong, subtle, refined, rough, geometric, organic sources … Depending on the typography that we choose, we will express different things that will help define our line of communication and will make it easier to identify the type of website that is being made. Therefore, the selection of fonts to be used in a composition must be done responsibly.

A very important factor in choosing sources whose characters are open and well proportioned. The characters with stylistic effects are less readable, especially on screen, so they are less recommended when using them in large blocks of text.

In addition, we must emphasize that the typographic families available in each operating system are different, so we will have to make sure that the textual contents will have the closest possible similarity, whatever the user’s operating system/browser.

In the choice of our typography, we should take into account some concepts that we explain below:

Pixelization:

Typographic fonts designed for traditional printing systems are often poorly displayed on computer screens, as they are not designed to be reproduced on a lower resolution screen. For this reason, it has been necessary to create specific screen sources, such as Verdana, Tahoma (Sans Serif) and Georgia (Serif), which tend to vertical or horizontal lines, which makes them look sharp and defined, smoothing the staggered the strokes.

Antialiasing:

The solution to the problem of pixelation is to apply the antialiasing technique, a mechanism widely used in the processing of bitmap images. It consists of a blur of the edges of the characters, creating intermediate pixels between the color of the character and the background color. Operating systems usually offer antialiasing configuration options to avoid scaling on the screen. The problem is that, since the application of this visualization method is configurable by the user, we can never be sure that it has been activated, so we will not know how the sources will appear on the monitor of each visitor of our website. , as a solution in short texts (short headlines or headings) it was suggested to convert texts into images. So we can apply the antialiasing and be sure of its final visualization. However, today it is not recommended because the texts of the headlines are usually taken into account by search engines for the positioning of the web. This, together with the CSS techniques that allow us to use any type of source, and the best rendering engines, means that we do not need to worry too much about pixelization.

Hinting:

Another technique that we can use is the hinting, a mathematical method that defines exactly the pixels that will “turn on” to modify the contour and, in this way, create the best possible drawing of a character of small size at low resolution.

Some Resources for Sources:

Two of the most used web pages to find the best typography are Google Fonts, where you will find a collection of sources that you can help with our web design agency Dubai.

It is also easy to find sites that collect sources and classify them into several factors: clean sources, dirty sources, decorative and elaborate sources, and handwritten fonts, fonts for cartoons and calligraphy fonts.