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 for improving the type foundation of design."

Rule 1: The Fewer Fonts, the Better

One of the biggest mistakes designers make is using too many 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 headings and stick with it, maybe one more for subheadings as a last resort. 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 in small print, it looks cool. (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 a dark background is not a 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 a separate design element. 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.

Typography plays a key role in web design, according to statistics, 95% of website content is text content. Font design controls the mood and creates a certain atmosphere when reading the text content of web pages.

Modern web typography is based on CSS styles. By changing the default browser style values, you can make text content more attractive.

This article will cover the main aspects of modern web typography, which will help you decide when choosing a font and text styling.

CSS Properties for Proper Web Typography

1. Font family (font-family property)

Font selection begins with the choice of a typeface.

Headset- a font or several fonts that have a stylistic unity of style. It consists of a set of characters (usually numbers, letters, punctuation marks, special characters, but it can also consist exclusively of non-alphabetic characters). For example, the Times New Roman typeface consists of regular, italic, bold, and many other fonts in this family.

Headsets can be divided into two main categories: serif(antiqua and square fonts) and sans serif(grotesques).

Sans serif fonts have a simple and clear appearance. Serif fonts, on the other hand, lend a more serious and formal tone.

In the process of reading, the eyes get used to the main font and they get tired if the headings, table of contents and secondary text are typed in fonts of a different typeface that do not harmonize with the main font. Therefore, when choosing fonts, it is enough to stop at one or two fonts, and place accents due to size, color, style, etc.

When can multiple fonts be used:

• There are no special styles in the typeface (bold, bold, italic);
• It is necessary to achieve similarity with a certain era;
• For visual separation of texts of several types (for example, comments in the text, lines of code, formulas, texts in another language);
• For aesthetic purposes.

TypeTester service for font selection

2. Combination of serif and sans-serif fonts

There is an unspoken rule in the recommendations for font combinations - sans-serif font is chosen for headings, and serif font is used for body text. However, this approach is not as popular as it might seem.

In fact, this rule applies primarily to printed publications, book printing. This is due to the fact that serif typefaces (small strokes at the ends of the main strokes) line up smoothly, making the text easier to read and more readable.

Things are different with the display of text on the displays of various devices. There is a problem of smoothing and uneven serifs. Therefore, a sans-serif font with a slightly increased height of lowercase characters is better suited for body text.

3. Font color (color property)

Color gives the text clarity and expressiveness. Colored headings and small accents in the text can attract more attention than black text.

However, do not forget that any color carries with it its own mood, and each person has personal feelings that this or that color evokes in them.

A warm color actively draws attention to the text, making it visually larger in size than a similarly sized font in cold shades. For small text elements, brighter colors are suitable, the side content of the page can be highlighted using a color that is 20-30% lighter than the text color of the main content of the web page.

When choosing the number of text colors, it is preferable to limit yourself to two sufficiently contrasting colors (not counting black and white). Black text on a white background is a classic with plenty of contrast.

4. Font size (font-size property)

The browser's base font size is 16px , and headings are set proportionally to the base font size (h1 - 2em, h2 - 1.5em, h3 - 1.17em, etc.).

By varying the font size, you can give the text visual significance and draw the attention of visitors to the most important pieces of text. As a rule, the larger the element, the more important it is.

The size of text in a browser window is affected by the resolution of the user's monitor: text of the same size on a monitor with a higher resolution appears smaller than text of the same size on a monitor with a lower resolution.

Fonts from different families of the same size may also have different actual sizes.

With the growth of screen resolutions and monitor sizes, it is necessary to reconsider the usual text size of 12-14px. For plain text, a 14-18px font is already widely used. When setting the font size, one should not forget about adaptability, i.e. the font size should change depending on the screen size.

5. Text alignment (text-align property)

Justified text looks good on a printed page by distributing words evenly across lines. This kind of formatting of web pages with CSS is not possible, and justifying text in width creates large, unpleasant gaps between words. Therefore, web typography typically uses left alignment.

6. Letter and character spacing (word-spacing and letter-spacing properties)

Letter spacing affects the readability of text. Varying the density of the text (condensed and sparse text) will allow you to diversify the pace of perception, achieving a balance in the text composition of the site.

Serif fonts look more expressive with reduced letter-spacing .

7. Line spacing (line-height property)

The optimal line spacing is 1.4 - 1.6 times the font size.

Also, don't put too much indentation between headings and their associated paragraph.

8. Line length

A line for continuous reading should contain from 30 to 75 characters (approximately 7-10 words per line). The wider the line of text, the greater the line spacing should be. Line spacing should not be less than the space between words.

9. Font style (font-style property)

You can create beautiful typography by controlling the font style. For example, italics give the text a certain solemnity. Bold style plus a larger font size allows you to highlight the desired content, but only if such text will stand out against the background of nearby objects.

Property font-variant: small-caps; gives text typographic sophistication by transforming text so that all letters are reflected in small caps. This technique is suitable for small fragments of text.

10. Text structure and visual hierarchy

The following objects are distinguished in the structure of a web page:

• Website logo / name;
• Titles/titles;
• Secondary headings;
• Main text;
• Navigation;
• Hypertext links;
• Long quotes;
• Side panels;
• Signatures / inscriptions in tables, figures.

Each list item is a fundamental part of the site and it justifies the need to highlight it.

There are six levels of headings in HTML, starting with the most important

and ending with the less significant

. header

should be first in the structure of the document, and lower-level headings should follow and detail the information. To highlight headings, you can use the technique of highlighting part of the heading with color.

For easier assimilation, the text should be divided into parts and for each section, choose the heading of the appropriate level. The higher the heading level, the more meaningful the section should be in content.

In the general structure of the text, special attention should be paid to links, they should be easily distinguished from the content surrounding them.

The visual hierarchy establishes the correct structure on the page, making the text easy to understand and read. In most texts, there is a division of the text according to meaning. There are several ways, the easiest is to break the text into paragraphs.

• Capital;
• Italics;
• Bold/bold style;
• Size;
• Color;
• Headset change;
• Changing the position of characters on the text strip (upper and lower case, indents);
• Highlighting characters using graphic elements - pointers, frames, icons, etc.

Highlighting too much not only overemphasizes the attention on any fragment, but also makes it difficult to read.

11. Safe Fonts

Windows fonts / Mac fonts / font family

Arial, Arial, Helvetica, sans serif

sans serif

cursive

monospace

Georgia 1, Georgia, serif

sans serif

Lucida Console, Monaco 5, monospace

sans serif

serif

Tahoma, Geneva, sans serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans serif

Verdana, Verdana, Geneva, sans serif

Symbol, Symbol (Symbol 2 , Symbol 2)

webdings, webdings (webdings 2 , webdings 2 )

Wingdings, Zapf Dingbats

MS Sans Serif 4 Geneva sans serif

MS Serif 4, New York 6, serif

Arial, Arial, Helvetica, sans serif

Arial Black, Arial Black, Gadget, sans serif

Comic Sans MS, Comic Sans MS 5, cursive

Courier New, Courier New, Courier 6, monospace

Georgia 1, Georgia, serif

Impact, Impact 5, Charcoal 6, sans serif

Lucida Console, Monaco 5, monospace

Lucida Sans Unicode, Lucida Grande , sans serif

Palatino Linotype, Book Antiqua 3, Palatino 6, serif

Tahoma, Geneva, sans serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans serif

Verdana, Verdana, Geneva, sans serif

Symbol, Symbol (Symbol 2 , Symbol 2)

webdings, webdings (webdings 2 , webdings 2 )

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4 Geneva sans serif

MS Serif 4, New York 6, serif

1 The Georgia and Trebuchet MS fonts ship with Windows 2000/XP and are included in the IE font package (and indeed are included with many Microsoft applications), so they are installed on many Windows 98 computers.

2 Character fonts are displayed only in Internet Explorer, in other browsers they are usually replaced with a standard font (although, for example, the Symbol font is displayed in Opera, and Webdings in Safari).

3 Book Antiqua is almost identical to Palatino Linotype; Palatino Linotype comes with Windows 2000/XP and Book Antiqua comes with Windows 98.

4 Please note that these fonts are not TrueType, but bitmap, so they may look bad at some sizes (they are designed to display at 8, 10, 12, 14, 18, and 24 pt at 96 DPI).

5 These fonts only work in standard fonts in Safari, but don't work in bold or italics. Comic Sans MS also works in bold but not in italics. Other Mac browsers seem to be fine emulating missing font properties on their own (thanks to Christian Fecteau for the tip).

6 These fonts are only installed on the Mac during the Classic install

With the advent personal computers and early desktop publishing, there was a tectonic shift in typography, the consequences 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, we can note three trends that are gaining momentum, which 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

To clear up the confusion that may arise, it is necessary to immediately clarify the meaning of some key terms. The first important set of keywords define the concepts of "font" and "typeface".

A font is a set of characters of a specific size and pattern. The typeface defines font style families in the same way. The key word here is styles, which separate different fonts into groups or families. For example, it can be serif, sans-serif, handwritten, display, monospace, and others. We can say that a typeface is a set of fonts of different styles and sizes, united by a common style of execution. As you can see, font is a narrower concept.

When designing a web page layout, font selection is very important. Naturally, it is best to use fonts from the standard set of Windows or Mac. But sometimes this set is not enough to bring the designer's idea to life, and then the entire load falls on the shoulders of the layout designer. Fortunately, Google Web Fonts offers a very elegant solution to this problem.

There are also terms such as "weight" and kerning. All of them can be modified with CSS and applied to paragraphs, headings, or other text elements. The "weight" property of the font determines the thickness of the lines when drawn. This is a range of values ​​from 100 to 900, where each number indicates a weight corresponding to the weight of the font. Normal font "normal" corresponds to the number 400, bold "bold" - 700. Kerning - changing the spacing between letters depending on their shape. It is the process of placing the symbols correctly, by adjusting the distances between them, in order to achieve harmony. Although many do not pay much attention to kerning, it is the little things that help to achieve very good results.

Breaking the rules

It would be reasonable to discuss the need to create new fonts. Recently, many websites have become outdated. They use standard fonts, which we are already tired of enough.

Today there are hundreds of fonts, but different operating systems offer their own packages. And only a few of the fonts are included in these packages. If you select a font that someone in the system may not have, then the font will be replaced with the default font. For these reasons, it is recommended to use base fonts. But sometimes basic fonts can't fully capture the designer's imagination. Therefore, if you are sure that a custom font is needed for your design, you can turn your custom font into an image and upload it to your site. Make your headers, headers or menus graphic and use them.

Be sure to make sure that the headings correspond to the topics of the site. They may include different colors, underlining, background icons, or graphic text. Ultimately, the decision is up to you.

In addition, you need to ensure that all text links have the same font on the site. Using links of different fonts and designs will give the user significant difficulties in navigation.

Choosing the Right Font

It should also be noted that different typefaces can affect the mood of readers in different ways. As a rule, serif fonts are better suited for printed materials. Serifs help create space between letters, as well as separate one character from another. Often, serif fonts give a sense of personal, respect, intelligence, and professionalism.

Sans-serif fonts are best suited for web pages. Low resolution screens make serifs look blurry and, in turn, poorly perceived. Sans-serif fonts tend to express feelings of rationality, style, youth, and modernity.

For example, the choice of serifs gives a sense of professionalism and authoritative information. You can often see this in mainstream media outlets like the New York Times. Smaller blogs can use a sans-serif font with a large line height. This gives users the ability to quickly view blog text.

You should always think about what information you are trying to convey to the visitor. When choosing a font, keep in mind that happy messages should be accompanied by light, airy and soft font shapes, while messages with some darker themes, such as Halloween, would be better accompanied by hard-edged fonts.

legibility

Typography, and more often just illegible, can hurt the eyes very much. There are, of course, some exceptions when Funky or other illegible fonts can be used, such as for nightclub promotions.

But still, if you have a desire to use, for example, Soda, Bored or Akka, then it is better to refuse this idea. If the desire is still strong enough, then these fonts should be used sparingly. For example, as a title. But then the body text should be more legible. This can help create momentum in your site. And be sure to remember that the use of such fonts should be a design advantage, not a disadvantage.

informative

Design should complement your information. The user does not need to figure out what exactly the designer had in mind. The wrong choice of typography can contribute to the misconception of the user about the company and its services.

In design for business projects, you should mainly use traditional smooth fonts. This must be taken into account even if you do not have an official design. Especially if you want people to take your site seriously.

Placement and dimensions

It is very important for effective design - where you need to place the text, and what size it is. No one wants to strain their eyes to read information or see incredibly huge words on a site. The purpose of creating good design is to find a balance. And the first step to that is figuring out which information will be more important.

As a general rule, words that need attention need to be done a little more. Or vice versa - insignificant should be smaller. Everything depends on the importance. In other words, you need to create a hierarchy of words.

As for font placement, try to keep it balanced. No need to scatter pieces of text around the four corners. This can significantly distract users.

Color

This is one of the easiest aspects. You need to choose a color with which the text will stand out from the background and remain readable.

Your assistants will be contrasting colors, as well as the use of effects such as strokes (stroke) and glows (glow). This will help make the site more attractive and easier to read. You need to choose a color that will make people stop and look, and make the information the dominant part of the design.

Conclusion

Using fonts in Photoshop is very different from using them in web pages. This explains why typography is so difficult for some designers to work with. Typography on the web is a broad topic and requires a lot of research. You should always remember that it is very important to find an approach to using typography that matches the mood and aesthetic of the design. Don't be afraid to mix and match different types fonts, just make sure they're lucky.

From the author: I greet you, friends! We continue to analyze the intricacies of professional web design, and today a very hot topic is in line - web typography. Unfortunately, many developers do not even know the very basics and rules of this direction. Maybe they just don’t bother and don’t want to waste time on it, or maybe they don’t fully understand its meaning. In general, my goal is to convey to you that typography in web design is the basis of the basics, and without it it will be very difficult to move on.

Typography and message

The purpose of any Internet resource is an informational message to the target audience. What will the visitors of your site pay attention to first of all? Of course, on the text! (Of course, if it is not clogged with indiscriminate advertising and a lot of stupid banners). The text, and only the text, will ultimately determine the success of your project.

Let's understand what typography really affects in web design.

First, the image of the web resource. High-quality development is visible to the naked eye, and you don’t have to be a mega-specialist to estimate how long you want to stay on the site. Crooked unreadable text is the first reason a visitor will leave your link 10-15 seconds after entering.

Secondly, the uniqueness of the web resource. Taking into account the fact that at today's pace of progressive development of the Internet space, finding absolutely unique content is simply unrealistic, your task is to uniqueize the presentation of this content. In the battle of competing sites, the one who does not neglect the simple rules of development, but on the contrary, effectively applies them and gets the most out of it, always wins.

Basics of typography in web design

Fonts in web design

Typography in web design has quite natural laws and regulations. Let's start with fonts. The right choice of fonts will largely determine the concept of your development and will affect the overall perception of the resource.

Back in the very recent past, although few people know about those times, designers could only use fonts that accompanied operating system. All the great versions were nothing more than an image or a flash. There were workarounds, but they brought a lot of problems.

The introduction of the @font-face CSS property just gave designers a free hand. I registered a link to any font file, and now it is already used on the pages of the site. There is some dissatisfaction on the part of the developers in this topic, but this turned out to be a completely solvable problem.

I note that not all fonts are suitable for competent web design. Basically, because of their unreadability and difficult perception from the screen. Some fonts turn out to be too heavy and slow down the work of resources - be sure to pay attention to this. I will add more technical feature when working with fonts: their display in different browsers- there is such a problem of processing a file or even a whole family.

Macro and micro typography

As you probably already understood from the name of these terms:

macro level - builds the general structure of the text, determines the placement of content relative to the design;

micro level - pays attention to the smallest details, spaces, intervals, indents, etc.

The task of macrotypography is global - to make text blocks alive, active, but at the same time harmonious and solid. Microtypography has a simpler, but no less important task - to ensure readability. There are many examples of successful and unsuccessful solutions to these problems on the Internet.

The construction of a holistic composition, first of all, lies in the understanding of space. A web designer must see the whole picture, but at the same time correctly decompose it into details. There are no insignificant elements here: heading, paragraph, vertical spacing between elements, registers, thickness…

Fonts for web design should preferably be specified in relative units (% or "em"), this contributes to the adaptability and flexibility of the content. It makes sense to use the more familiar “px” pixels for non-responsive containers, when blocks move when the screen size changes, and the font remains stable.

Text decoration

An important section of typography is computer character typesetting. This includes: punctuation, the use of brackets, hyphens and dashes, periods, spaces, etc.

Such errors, at first glance, do not pose a particular threat to the content or uniqueness of the content, however, remember: no self-respecting resource will make primitive mistakes in the texts. Remember the image, there are no trifles in it!

Now about layout. There are rules here:

The block with text should be limited to 40-50% of the page width.

There should be 1.5 spacing between paragraphs.

The contrast of the background and text should be within 75–90%.

An eye-friendly font is 12–16 px, but even the smallest block should not be less than 10 px.

The line spacing is maintained relative to the font size and is measured as a percentage, ideally 140-150% will be enough.

It is considered extremely bad form to align the text to the center or to the width. Jagged spacing between words, as well as jagged edges of paragraphs, reduce perception, and most often just annoy.

CSS styles

CSS style is a tool for working with fonts in web design. Any training course begins with mastering CSS styles. What are they needed for? To summarize the entire typography of the resource! CSS brings pages and blocks together, controls any deviations from the main course. As you understand, one idea is not enough; to implement it, you will need knowledge and skills.

I once read in a cool article that web design is 95% typography. Believe it or not, everyone decides for himself. But text that cannot be read is a product without a purpose. My advice to you is to start paying attention to the quality of the presentation of information immediately, do not delay. That's all for me. Subscribe to updates and you will not miss the most interesting! Bye Bye!