What is typography and how to choose fonts for a website

0c4bbaa23e83a7a2e1e3fb2f845c45da

When it comes to graphic design, most often a beautiful picture, bright and interesting colors, complex and incredible ideas, something fashionable, something modern are presented. At the same time, rarely anyone thinks about fonts, their size, color, saturation, kerning and spacing. Well, the font and the font, what to take from it… In fact, the typeface in the design of any product plays a very important role. She sets the mood and can sell even an unnecessary thing.

In today’s article, we will talk about what typography is, how to work with it, and why it is needed at all.

What is a printing house?

Printing is a whole art, the art of text design. In simple words, it is the transformation of a simple text into one that looks neat and is pleasant to read.

For example, we have the offer “Hello dear, dinner is on the table”. It can look like this:

An example of typography

We can design the same text like this:

Typography examples

There can be many design options. This is the essence of printing – it is diverse and there is no single formula. We can play with the fonts as we need. In the first picture, although the font was quite large, it was not as easy to read as in the second.

Knowledge of typography is the ability to use rules and regulations to design the selected text so that the reader can easily and pleasantly perceive the information. If the text is typed solidly, without paragraphs and accents, then no one will read it – it is at such moments that the printing press begins to work.

The community is now in Telegram

Subscribe and stay up to date with the latest IT news

Sign up

The main types of headsets

To understand typography, you need to understand the basic concepts. The first thing to know is the types of headsets. There are many fonts, and for convenience it is customary to divide them into:

  • antiques,
  • grotesque,
  • handwritten,
  • accidental

We will talk about each type in more detail below.

Antique

This typesetting is also called serif drafting. We can see the serifs below and above the letters:

A serif font is this

This typeface was inspired by traditional calligraphy and is considered one of the most famous and oldest styles. According to some sources, the antique appeared in the 15th century.

Most often, antiques are found in newspapers, books and magazines. It is believed that such a font is easier to read, but this does not mean that it is universal.

Popular serif fonts:

  • Times New Roman,
  • Garamond,
  • Bodoni,
  • Playfair Display,
  • Merriweather.

Grotesque

This type is similar to the previous one, but serifs are not used in it. The letters are straight, without any additions:

This is a sans serif font

The Grotesque typeface became popular in the mid-20th century and has a more Gothic look, while the Antiqua typeface is considered a “Roman” style. The symbols of this type of headset are clearer, bold and modern. An example of such a typeface can be noted the well-known Arial, which is often found in headings on websites and advertisements.

Other popular sans serif fonts:

  • Open Sans,
  • Raleigh,
  • Montserrat,
  • Druk,
  • Futura PT.

Manuscript

It is already clear from the definition what kind of font it is – it is similar to what we write by hand in a notebook and letters. There are many variations of this typeface, some of them are difficult to decipher, so the handwritten font should be used with care, despite all the beauty. It’s always worth considering whether users will be able to read it, especially when choosing a font for your brand logo.

This is a handwritten font

Popular handwritten fonts:

  • Antarctic,
  • Rhythmic,
  • Amatic SC,
  • caravan,
  • horn

Accidental

Accidental typeface fonts are fun, informal and original. They are usually used in short texts, headings. Most often, this type of font is found in the logo design of popular brands. For example, look at the Fanta logo:

    Fanta logo

Popular accidental fonts:

  • Miratrix,
  • Monica,
  • Durance Type,
  • Flicker,
  • CSTM Xprmntl 03.

These were the main types of typefaces that can be seen in a printing house. Most often you can meet grotesque and antique or their combination. Other images are rarely used, but can significantly change the mood of the product.

Typography parameters

Each font has such parameters as interlining, kerning, tracking, saturation, alignment. What it is and how to work with it – we will talk in detail later.

Interlining

Spacing between lines is called spacing. This is a very important parameter that can both improve the reading of the text and make it worse. You should be extremely careful: if you do not know how to work with it, it is better not to change it.

What is interlining

Here are some tips for choosing the optimal line spacing:

  • The longer the line by the number of words, the more spacing should be. Conversely, too narrow a column of short lines looks ugly even with standard spacing.
  • Usually the line spacing is 120-125% of the font size used. For example, you chose pin 16. You can calculate the value using the classic formula: (16 * 120): 100 = 19.2. That is, the recommended line spacing is 19-20.

At first, it will be difficult for you to determine the correct line spacing. But over time, your eyes will get used to it, and choosing the optimal line spacing will happen automatically.

Tracking

The distance between characters in the text is called tracking, letter spacing. Most graphic editors and online tools support both positive and negative tracking. Try to strike a balance when defining your tracking so that your project looks creative and professional at the same time.

What is tracking?

As with indentation, this takes a lot of practice. At first, it is better not to touch this parameter at all.

Kerning

Unlike tracking, which is the distance between text characters, kerning determines the distance between letters in a word. It is usually used for single words, such as logos, rather than long text. Also, kerning is often used in titles in which all letters are capitalized – in this case, increasing the distance between characters improves readability.

What is kerning

I don’t recommend playing with kerning – all fonts are well designed and easy to read by default. But if you want to experiment, do it carefully, do not violate the rule of proximity.

Saturation

If the previous parameters can be attributed to any font, not all of them have saturation. Some fonts come with just one image, some with two, and some with a whole set.

The most popular images:

  • Thin – thin;
  • Regular – simple;
  • Italic – italics;
  • SemiBold – semi-bold;
  • Bold – bold;
  • Bold Italic – bold italics;
  • ExtraBold – extra bold.

Images such as Book and Demi can also be found – you can see them in the Futura PT font.

Of the inscriptions, SemiBold, Bold, ExtraBold are better suited for headings, Italic for subheadings, and Regular for the main text. In the case of Italic, you should be careful and choose only those fonts that are good in this drawing. Otherwise, it is better to use Regular.

Leveling

Text is left-aligned in books and blogs. Text Alignment – ​​the same distance and size between all text elements. The text can also be centered, right-aligned, and width-aligned.

Text alignment in typography

On the site, you should avoid alignment by width – this option is usually used in books, but it looks silly on the pages of the site.

“Dangling prepositions” should also be avoided when aligning.

What is a hanging preposition

You can get rid of hanging drives by simply moving or increasing the letter spacing. But you should be careful with this, it is better to just move the reason to the next line.

How to improve the typography on the site

Here are some tips to improve your typography, both on your website and anywhere else you’re going to use text:

  1. Do not use more than two fonts. A large number of fonts will only confuse the user, and it will be difficult for him to perceive information. Use font pairs – one font for headings and another for body text. In some cases, only one font may be used, but more often title-content pairs are taken. Searching for a font pair is convenient using the Paratype and FontPair services.What are font pairs?
  2. Don’t make the font too small. The minimum size for readable text is 16px in both desktop and mobile versions. A smaller font can be used only in extreme cases, for example, when it is necessary to indicate additional information. In general, the standard font size is 16-22px. The header can be large, up to 100px, but most often it is in the range of 40px-70px.
  3. Do not use black color for font #000000. This is the deepest black you can choose. Long-term reading will tire the eyes. It is better to use less bright colors, for example, slightly grayish.
  4. Use free fonts. Fonts are divided into paid and free. You can find any for free on the Internet, but if you use a font without a license, it will be a violation of copyright. In this case, the owner of the font can take you to court. Of course, it is unlikely that this will happen, but it is better to use free fonts or buy paid fonts. You can find free options on the official Google Fonts page.
  5. Watch the font size. In this case, what I mean is that the highest header should be either equal to or greater than the others. In no case less. If the size of the first heading is smaller than the second, then the hierarchy will be lost and it will be difficult to study the content.
  6. Avoid dangling prepositions and single words. I have already spoken about hanging prepositions – there should not be any.
  7. Use capital letters in headings and important places. Capital letters can strengthen the title and direct the user’s attention to the right place.

If you want to become a typography guru, then regularly study the work of other designers. I advise you to pay attention to the “unkillable” Swiss style, which has been popular for the second century. You can see works in this and other styles on Pinterest.

And if you just need a font for the site, here are great services with a free typist: “We are with a cat”, “shriftkrasivo”, “BestFonts.pro”, “Rufonts.ru”.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2022 ZoNa365.ru - Theme by WPEnjoy · Powered by WordPress