Corrected an old article about typography, for those who have not seen it, it will be useful for review

Typography- one of the most important aspects of web design, because it conveys basic information. Unfortunately, many designers and customers are afraid of bold experiments, choosing one or two “tested” fonts for their projects.

So, this article is dedicated to those who are lost in the ocean of typography. We'll talk about the basics of typography, what fonts are, and the structure of fonts.

Typefaces vs Fonts - What's the difference?

Many people use the words typeface and font interchangeably. In fact, these are not the same thing, now I will explain why.

Headset is a set of stylistically similar characters that can be written/printed. These are numbers, letters, symbols. Font- This is a narrower concept, which is determined by several factors, such as size and style. Basically, Arial is a typeface and Arial Bold is a typeface.

Classification

Fonts can be divided into several groups - serif (serif), sans-serif (sans-serif), handwritten (script), display (display). However, there are other types of classification.

Serif fonts, Antiqua (Serif)

They are called so because each letter has small serifs. When printing large blocks of text in web design, they are not recommended, as they are considered difficult to read. These fonts are usually used for headings.

Serif fonts have quite a few subtypes - for example, old style("Old style" - they are also called humanist, humanistic antiqua) - the very first fonts of this classification, they were used already in the distant 1400s. Their distinguishing feature is that the part of the symbol, which is located at an angle, is made thin. Font examples are Adobe Jenson, Centaur, and Goudy Old Style.

Transitional serifs (Transitional serifs)- were used in the 1700s. This includes fonts such as Times New Roman and Baskerville, as well as Caslon, Georgia, and Bookman. With them, the difference between the thick and thin parts of the letters is more noticeable than with Old Style, but less noticeable than with Modern.

Modern serifs (New Style Antiqua)- used already after the 1700s, and have a strong contrast between the thick and thin parts of the characters. This includes fonts such as Didot and Bodoni

And finally , Slab serifs (Slab fonts)- generally have the same thickness of all lines, and large serifs at the ends

Serrated fonts, Grotesques (Sans Serif)

Serif fonts are so named because they don't have serifs.) They look more modern, besides they began to be used in the 18th century.

Here are the 4 main types of sans-serif fonts: Grotesque (Old Grotesque), Neo-grotesque (New Grotesque), Humanist (Humanistic), and Geometric (Geometric).
Old grotesques- the very first ones, they are similar to serif fonts, but without serifs.
For example, Franklin Gothic and Akzidenze

New grotesques have a simplified, in comparison with the old grotesques, appearance. Many of the most popular typefaces today are new sans serifs, such as MS Sans Serif, Arial, Helvetica and Univers.

Humanists- more calligraphic than all other sans serif fonts (that is, they change the thickness of the lines). These include, for example, Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande - they are often used in filling the body of the site.

Geometric based on regular figures, for example, "O" is a circle, etc.; are considered the most modern sans-serif fonts. Examples are ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Handwritten (Script)

Handwritten fonts are based on handwriting. There are two types of such fonts - formal (formal) and Kezhl (casual). Formal, as if written by hand, they come from the 17th-18th centuries. Some typefaces are based on famous masters such as George Snell and George Bickham. Take Kuenstler Script as an example of modern fonts. Nice and elegant, it doesn't fit the body text of the page.

Kezhl fonts are a more modern version, it originated in the 20th century. It's less formal, often with bold strokes and a brushstroke effect. These fonts include Mistral and Brush Script.

Display fonts (Display)

The display category includes those fonts that are generally not suitable for writing text. Most often they serve as an accent. They are usually used in the printing industry, although they are also beginning to appear on Internet pages. Among the displays you can find, for example, blackletter - the original fonts of the first printing presses.

Non-alphabetic fonts (Dingbats)

Non-alphabetic fonts- these are those fonts that do not contain letters at all, but contain symbols and ornaments.

Proportional vs Monospace

In proportional fonts, a character takes up as much space as its natural spelling requires. For example, Times New Roman is a proportional font. But in monospace fonts, all characters are the same width. These fonts include, for example, Courier New

Mood

The mood of a font greatly influences whether it is appropriate to use it in a given situation. Quite often, contrasts are also used - business style is combined with informal, light with dramatic. Times New Roman, for example, is a strict font and is the one most often used for business correspondence. But, for example, Helvetica generally changes its mood depending on the surrounding fonts.

Thickness and style

The thickness of the fonts are: light, thin, regular, medium, bold, heavy, or black.

There are three font styles - italic, oblique, and small caps. Small caps are commonly used for headings.

Italic and oblique are interchangeable, although they are different styles. Oblique is a slanted variant of regular fonts. To get it, just use the Free Transform-distort feature in Photoshop. But Italic is already a separate character set, which is responsible for the oblique version of the font.

Font structure

Each character has a certain set of characteristics that can be used to determine how it combines with other fonts. Here are the main ones:

Font line (baseline)- an imaginary line on which the text is located. Sometimes rounded fonts recede slightly from the type line.

Lowercase line (meanline) denotes the height of most lowercase letters, usually determined by the height of the "x". This is where the concept of x-height comes from.

Top line of capitals (Cap)- height capital letter"BUT".

The figure above shows the three common parts of all letters.

Basic stroke, Shtamb (Stem)- the main vertical of each character, including the oblique one.

Crossbar (Bar)- horizontal part of the font

Oval (Bowl)- the rounded part of the font.

Upper remote (Ascender)- sticking up part of such letters as "d", "h", and "b".

Descender- sticking down part of such letters as "p", "q" and "f"

serifs- a distinctive feature of serif fonts). In some fonts, they are more pronounced, while in others they are less pronounced.

Aperture- denotes a gap on open characters such as "A", "c" or "m"

Ear it's a decorative addition to a character, like the "g" in the example above.

Connecting stroke (Hairline) it is the thinnest part of a serif typeface.

Crossbar - horizontal line, as, for example, in the characters “A” and “H”.

Drop (Terminal)- round or oval (drop-shaped) stroke ending in the drawing of some characters of the font.

Loop occurs only on some lowercase “g” letters, and may be completely closed or partially closed.

Spike (Spur)- a tiny notch on some letters, for example, on “G”.

Attachment (Link) connects the top and bottom of the letter "g".

Back- the central curve that the letter “s” has.

Tail of the letter (Tail)- a decorative line, for example, on the letter “R” or “Q”.

End element (Terminal, Finial)- sans-serif stroke ending

Shoulder- a rounded line that departs from the main stroke. (to be honest, on many Russian sites they give a completely different definition of this concept,)

With the advent personal computers and early desktop publishing, there was a tectonic shift in typography, the effects of which are only now becoming visible. This is not the first global change in typography, there have been others. Suffice it to recall the time when the machines of the industrial world triumphed over the artisans. Mass production and profit have become more important than the beauty of fonts. Quantity mattered more than quality.

The great masters stopped creating new fonts - those that already existed were suitable for printing books. Craftsmen, no matter how professional, were left without work and became part of the technological process.

However, the victory of industrialism did not mean that the great masters disappeared with the advent of printing presses. These two worlds continued to exist independently of each other - printers recognized the talent of artisans, and they, in turn, understood that progress could not be stopped. This was the second change in typography, as a result of which it lost part of its "soul" or, so to speak, humanity. But to understand what happened just recently, you have to move back in time 500 years and find out how it all began.

FIRST TRANSITION

The first conflict between the new and the old arose after the invention of the first printing press. Its creator, Johannes Guttenberg, could use the machine to produce a wide variety of compositions, with print speeds of up to 240 pages per hour. It was a revolution.

Prior to that, all books were created exclusively by hand. Folios of the past were handwritten and decorated with intricate drawings and ornaments. The process of copying was very long, but as a result, any book, even a copy, was a work of art.

Of course, the first printed books could not be compared with handwritten ones. They were not very beautiful, but they were smaller and cheaper. And most importantly: the ability to replace individual letters and entire font families made it possible to print books not only in Latin, but also in other European languages.

People only welcomed these changes. They needed books in a language they could understand and books they could take with them. They had a thirst for knowledge and printed books quenched it.

However, as a result of the first transition, the book lost much of its humanity. Machines took over the main process, but craftsmen were still in demand. Each letter was cut by hand, and the design and illustrations were also created by people. However, it won't be long before craftsmanship begins to fade from the book production process.

DIGITAL AGE

The first crossing destroyed handwritten books. Industrialization finally deprived the seal of humanity, everything became mechanized and craftsmen were left out of work. But the third transition finally finished off typography as an art. Most headsets are surprisingly faceless these days. It's just a set of fonts on the computer. Hardly anyone knows the history of this or that font. No one cares before that. We scroll through hundreds of fonts a minute looking for the right weight, and everything else is not so important.

_______________________

“In our thoroughly computerized world, the proliferation of fonts and their various variations represents a new level of visual pollution that directly threatens our culture,” says designer Massimo Vignelli. “Of the thousands of fonts, we only need a few core ones, because everything else is just garbage.”
_______________________

In a way, he's right. Typography is not just fonts. It's not only beautiful letters, it's something different, something that makes us feel. Basically, typography is a message. According to the famous Russian typographer Lazar Lissitzky, typography should optically convey to the reader the same idea that the speaker voices.

A long time ago, no one wrote with a stylus on parchment. Gone is the rough paper smelling of printing ink. The glossy print market has shrunk to a microscopic level. Today we read texts that were not printed, but typed, and we read them not at all on paper. And, apparently, another transition awaits typography. No one knows what it will be, but, apparently, after the paper, the displays we are used to will also become obsolete. It is difficult to say when a new revolution will take place, but a new transition will definitely take place.

The saddest thing about all this is that people have lost a part of themselves in the pursuit of perfection. Almost no one needs calligraphy skills today. This is a long time, it requires care and perseverance. Today, this makes no sense - after all, there are headsets for every taste. We choose fonts like zombies: name, size, style… Message? Message? There is no message behind computer fonts, no story, nothing.

NOSTALGIA FOR THE PAST

Today, many designers feel the need for new fonts that would allow them to give the text much-needed personality. There are many ways to work with typography, and each of them has the same goal - to get away from the facelessness of digital typefaces. Everything is used - color contrast, the illusion of volume, negative space, in a word, everything that can turn a standard font into a little less standard.

And in this regard, there are three growing trends that demonstrate the desire of designers to restore the lost authenticity to typefaces. There are only three main trends in typography, but they are hard to miss, as they appear literally everywhere. We are talking about such styles as retro, watercolor and caps.

VINTAGE GRUNGE TYPOGRAPHY

One of the most common design woes is the problem with .

In this article, we'll cover a few principles of good typography and give you tips on how you can avoid many common mistakes.

The article is not a book on typography or the art of typography, it is more like " quick tips to improve the font basis of design.

Rule 1: The Fewer Fonts, the Better

One of the biggest mistakes designers make is using too much a large number fonts and/or their styles. Try to keep them down to two or three. That is, the body text must be of the same font and size.

Pick one for the headings and stick with it, maybe, in a pinch, another one for the subheadings. Do not be afraid if the fonts are very different from each other. When using two very similar fonts in a design, the reader might think that you just made a mistake and accidentally chose the wrong font when typing.

Take care of the unity of color, density, etc. or your text will look like drunken flies are scattered all over the page.

Rule 2

Be careful not to crowd the letters too much. If you are having problems with not enough space for text, then it is better to reduce the font. Yes, this will probably add space between paragraphs, but it's okay, it will give you some breathing room when reading.

Rule 3. Correct alignment

Please don't center everything (unless it's a special design move). Consider using a grid. After all, everything on the page is interconnected. Use guides and place objects according to them. Don't scatter objects around the corners of the page as if you couldn't decide where to place them.

Rule 4. Less decorative fonts

Do you have beautiful decorative fonts? Amazing! But this does not mean at all that it is necessary to use them for the text of paragraphs. Behind decorative fonts, most often there is a story or they are used in a specific case, for example, for a title or title. Often, the simpler the better, which is why fonts like Helvetica are so popular.

Rule 5. Size matters

It's about the size of the letters of the text ;). Headings are fine when they are in bold and large type, but if you use too large letters in the body text, it will make it cheaper. Think about it. You go to a good restaurant and it often happens that the menu is written small print, it looks great. (Just make sure the font isn't so small that it's hard to read.) Don't be afraid to make headings much larger than body copy.

Rule 6

Everything you do is done so that it can be read. Dark text on dark background- it's not very good idea. Even worse, putting small text over a high-contrast photo. Remember to avoid placing text over anything.

Rule 7. Choose the right colors

What is the best color for a font? Generally, believe it or not, black or white is often best. If you are using a color other than different shades of gray, lower the saturation. Brightly colored font can be difficult to read. Beware of complex vibrating combinations such as red on green.

Rule 8. Suitable grouping

Related pieces of information are best combined together. This will make the design clearer. For example: look at a movie poster, all the data is grouped into attractive blocks. They can now be considered as separate element design. Examples of bad grouping - open the yellow pages.

Rule 9. Sufficient leading

This is the distance between lines of text. It is very important to choose the right interval. It is much more pleasant to read when there is a place for the eyes to rest between the lines. As a general rule, try to use at least 2 points more leading than the font size. For example: for maximum readability at 10pt, the font should be set to at least 12pt.

Rule 10. Watch out for kerning

Kerning is the spacing between individual characters in a word. It is important to have experience in identifying bad kerning, as often programs such as Photoshop, for example, make mistakes in arranging it. This will need to be adjusted manually, but the main thing is not to overdo it. If you don't like character spacing but don't know how to improve it, choose a different font.

Try to apply these rules when working with a font. Well-designed type blocks should look good without any images. At best, your typography reinforces the positive impression of the design. It should be attractive and easy to read.