Typography on the web

Typography – important for the web or not?

Typography on the web, however irrelevant it may seem to many, plays a key role in the design of the web brawl. When we talk about the “design” of a page, we do not now think of the classic design of whether something is beautiful or not, because it has always been a subjective thing for every person. Here we mean a functional design that contributes to experiencing the site in a certain way, and that the site really has the functionality for which it is intended.

When you search the Internet and literature, you will see that there are thousands and thousands of texts about whether a font is beautiful for this or that, or whether a font is better this way or that, but since the information about it is so different because as we mentioned primarily depends on the subjective feeling, we will note the most important characteristics related to fonts, which are reflected in books and encyclopaedias such as: https://www.superknjizara.hr/hr/graficka-enciklopedija-1971-f-mesaros.

When making a website that is related to a particular topic, then the design of that site must be adapted to that topic and this is known to everyone. Because if a site is made for some weddings, then the site must be primarily such that it looks elegant, because if the design is such that it is more reminiscent of a site for the sale of excavators no one alive will buy anything from that website. Of course, in this design, in addition to the elements of the page in terms of images and text, the most important are the elements of color and fonts.

The font distribution you can find on the internet can be confusing because as we have researched, there is almost no clear division that most typographers would consider standard. Here are a few examples:
1. https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
2. https://www.jotform.com/blog/a-crash-course-in-typography-the-basics-of-type/
4. https://design.tutsplus.com/articles/the-different-types-of-fonts-when-to-use-each-font-type-and-when-not–cms-33346
5. https://digitalsynopsis.com/design/font-psychology-emotions/In order to be as confused as possible in this sea of information, given our experience and research, we can say that the division of fonts in almost all websites that can be found on the market can be classified into four categories of letters:

  1. Serif letters (Group of Antiqua letters or Serif letters)

  2. Letters without Serifs (Grotesk Group of Letters or Non-Serif Letters)

  3. Manuscript letters

  4. Special forms

This division is rough and each of these groups could be divided into a large number of subgroups, but the basis in the creation of the website is reduced to just these four groups of letters. However, when making websites, and when the same sites are viewed on large desktop devices as well as small mobile phones, it must be taken into account that a large part of the population has a problem with vision and that if the font type and size is not well adapted, it can create a problem of lod reading and the one who has a problem with difficult reading will very quickly give up what should not happen at all costs.

Therefore, there are basic rules when choosing the type of typography (a type of font) depending on the elements of the page:

  1. It is necessary to use as few letters as possible with the sheriffs.
  2. Use only non-serif fonts on black backgrounds.
  3. Use tariff fonts only for larger letters and for highlighting (titles, subtitles, etc.)
  4. For writing longer tksts, it is desirable to use serif letters given their better readability, but the letter should not be small.
  5. Use manuscripts exclusively for higher prominences (titles)
  6. Use handwritten letters only in a curated form (small letters other than the first initial capital letter)
  7. Special forms of letters will be used only for global elements of the site with strong accents.

Given that many people find it very difficult to find the right combinations, there are many tools that can help when choosing the font and font size of a letter such as:

  1. Archetype – helps to select and combine fonts, and to adjust sizes, spacing, etc.
  2. Fontstruct – a tool to create your own fonts using grid systems and geometric shapes
  3. Prototypo – a tool to design your own fonts based on an existing font by adjusting certain font parameters
  4. My fonts – a tool to help identify fonts based on an image
  5. FontFace Ninja - free add-on for Google Chrome to help identify the font
  6. Canva – a tool for combining and pairing different types of fonts
  7. Kern Type – Tool to correctly adjust the letter spacing
  8. Calligraphr – a tool for designing your own font based on handwritten text
  9. Emotypes - a tool that makes it easy to find and select a font based on the emotions you want to convey to the audience through design
  10. FontJoy – a tool for easy pairing of different font types
  11. Type Scale – a tool to determine the font size of titles and subtitles based on the text size of paragraphs;
  12. Type Finder – an online tool to find the ideal font based on the questionnaire.