Typography plays 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 settings, you can make text content more attractive.

This article will look at the main aspects of modern web typography that will help you decide when choosing a font and how to design text.

CSS properties for proper web typography

1. Font family (font-family property)

Selecting a font begins with choosing a font typeface.

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

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

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

In the process of reading, the eyes get used to the main font and they become tired if the headings, table of contents and secondary text are typed in fonts of different typefaces that are not in harmony with the main font. Therefore, when selecting fonts, it is enough to focus on one or two fonts, and place emphasis on size, color, style, etc.

When can you use multiple fonts?

There are no special styles in the typeface (bold, semibold, 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

In recommendations for combining fonts, an unspoken rule prevails: a sans-serif font is chosen for headings, and a serif font is used for the body text. However, this approach is not as popular as it might seem.

In fact, this rule applies primarily to printed publications and book printing. This is due to the fact that a font with serifs (small strokes at the ends of the main strokes) smoothly lines up in one line, making the text easier to perceive and making it more readable.

The situation is different with the display of text by displays. 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 text clarity and expressiveness. Colored headings and small accents in the text can attract more attention than black text.

However, we should 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.

Warm color actively draws attention to the text, making it visually larger in size than similar-sized fonts in cool 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 fairly contrasting colors (not counting black and white). Black text on a white background is a classic, quite contrasting.

4. Font size (font-size property)

The base font size in the browser is 16px, and the size of headings is set in proportion to the size of the base font (h1 - 2em, h2 - 1.5em, h3 - 1.17em, etc.).

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

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

Fonts in different families of the same size can also have different actual sizes.

With the increase in screen resolution and monitor sizes, it is necessary to reconsider the usual text size of 12-14px. For regular text, a font size of 14-18px is already widely used. When setting the font size, you must 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 the printed page by distributing words evenly across lines. Similar formatting of web pages using CSS is impossible and justifying the text creates large, unpleasant spaces between words. Therefore, left alignment is commonly used in web typography.

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

Letter spacing affects the readability of text. Varying the text density (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 a reduced letter-spacing value.

7. Line spacing (line-height property)

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

Also, don't large indents between headings and the associated paragraph.

8. Line length

A line for continuous reading should contain from 30 to 75 characters (approximately 7-10 words on one line). The wider the line of text, the larger it should be line spacing. 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 an increased 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; adds typographic sophistication to the text by transforming the text so that all letters appear in small caps. This technique Suitable for small text fragments.

10. Text structure and visual hierarchy

In the structure of the web page there are following objects:
logo/site name;
titles/titles;
background headings;
main text;
navigation;
hypertext links;
long quotes;
side panels;
signatures/inscriptions in tables, figures.

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

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

and ending with less significant

. Heading

should come first in the document structure, and headings lower levels must follow him 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, select a heading of the appropriate level. The higher the heading level, the more significant the section should be in content.

In the overall structure of the text, special attention should be paid to links; they should easily stand out from the surrounding content.

Visual hierarchy establishes on the page correct structure, making the text easier to understand and read. In most texts there is a division of the text according to meaning. There are several ways, the simplest is breaking the text into paragraphs.
capital;
italics;
bold/bold style;
size;
color;
change of headset;
changing the position of characters on a strip of text (upper and lower case, indents);
highlighting characters using graphic elements— pointers, frames, icons, etc.

Too much emphasis not only puts too much emphasis on a particular passage, 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

We, as designers, must not only understand and grasp the meaning of the text, but must see it. That is, to recognize what typeface the text was typed in and what style was used. To choose the right fonts for websites or mobile applications You need to understand typography at least entry level. In this article I will explain the basic principles and concepts of typography, which will help a novice web designer if this is your first time hearing about the concept of typography.

Let's start with typography examples.

Typography is the use of the right fonts not only in the design of books and magazines, but also for websites or applications for a mobile device.

There's no need to do that

You can often find this type of typography in advertisements on poles or in the subway.
To understand the difference between the first examples and the second, you need to know the basic principles and definitions, you need to understand and feel the fonts. Theory is important if you want to quickly and effectively start in the web design niche.

Try to read this text in 20 seconds.

There is a mistake in every word in this text. Since we are literate people, we are used to seeing what we want to see. We can easily read even such a text, without reading into the symbols, and understand it. This is normal, most literate people do this, that is, they do not notice typos, because they want to see what is written here (understand the meaning of the text), and not see the abra-kadabra. Therefore, when the fonts are chosen correctly, it will not be difficult for you to read even text with big amount typos.

Typography

The definition of typography is the design of text using typing and layout tools. The concept of “typography” comes from printing.
In the picture, the letter is a metal block on which there are printed space elements that make an imprint on the paper and the corresponding letter is obtained. Therefore, in the definition of “typography” there are words such as “typing” and “layout”; they came from printing.

Basic Definitions in Typography

Calligraphy example

Calligraphy- art nice letter. Take a wide pen, a brush or a piece of a ruler and use these tools to create such works.

Creation of decorative fonts. Usually a sketch is drawn in a notepad, then transferred to Illustrator, the font is outlined using Bezier curves, after which a neat inscription is obtained.

Lettering for the logo

Difference between calligraphy and lettering. Calligraphy is when you take a pen, marker or whatever and draw anywhere. Lettering - when you draw a sketch, transfer it to a graphic editor, trace it and get beautiful letters, which can be used in a logo or anywhere else.

Basic rules of typography

Lowercase and capital letters font

Lower case- letters accepted for continuous typing.
Uppercase(capital letters, popularly “big”) letters are used for uppercase characters; a sentence or proper name begins with them.

Hyphen and dash
An important feature that beginners miss. Hyphen and dash - different signs, this is important to know.
Hyphen- a short dash to separate words and hyphens. Nothing beats the words. Spaces are NOT placed before or after it.
En dash is used to indicate numeric ranges, usually also not separated by spaces.
Em dash- This is a punctuation mark, used in sentences and separated by spaces.
Hyphen, en dash and em dash differ in the length of the sign itself. There is also a minus sign, it is the shortest of all. Here's a little hint. Save the picture for yourself to remember what's what.


To type an em dash on a PC, hold down alt key and on additional numeric keypad(you have a block on the right) dial 0151, you get an em dash. En dash: alt + 0150.
If you forget the combination, then type “em dash” in a search engine, find the Wikipedia article and copy the dash from there.

Quotes
It is important to remember that in Russia it is customary to use Christmas tree quotes"". To type them use alt + 0187. Some people use the double minute sign “ as quotation marks, but it is better to use quotation marks“ ”: alt + 0147.
Combination Shift keys+ 2 in the Cyrillic keyboard layout brings up the familiar “sign” on the screen. It does not denote quotes at all (as is commonly believed), but seconds: 68° 13′ 22″ or inches: a 17″ diagonal monitor.
The publication must use one quotation pattern, except in “cases of “quote within a quotation.”

Fonts

We've sorted out the signs, now about the concept of font. Here I will give only basic definitions of how to use fonts correctly, read in.
Font- a set of letters intended for typing. A letter is the thing I talked about above, a metal block with a letter. Roughly speaking, a font is a set of metal letters designed for text.

Headset- a set of fonts that have uniform style and design. Naturally, they should have a similar style. For example, the PT Sans typeface consists of different font styles: Bold, Italic and others. All styles together give us the PT Sans typeface.

Font styles is a graphic type of font within the same typeface. For example, PT Sans has thin, bold, bold and other styles. Usually in Photoshop it is written in English.

- distance between baselines adjacent lines.

Alignment (alignment in life)- the method of positioning an incomplete typed line relative to the vertical boundaries of the dialing bar. You've probably seen buttons like this in MS Word (find picture, align). It’s called a switch, because when it was necessary to correctly arrange the metal letters, space metal blocks were placed in them to turn them off. That’s why it’s called “turn off”.

Text alignment or justification

Kerning and tracking
Kerning- selective change in the spacing between letters depending on their shape. When multiple (different) characters are aligned. Visually, some combinations of letters are very close; if there were the same distance between all characters, then visually it would look different. Therefore, when creating fonts, they use tables in which the combination of letters and the distance between them are strictly written. IN good headsets this is already specified by default, but can be adjusted in graphic editor, which you use (for example Photoshop).

Tracking- the distance between characters in a word or sentence.
It makes sense to use tracking, if you use capital letters, it makes sense to track so that the distance between them is greater, they will be easier and better read.

If you use Photoshop to create a website design layout, then I advise you to set the kerning to “auto” and don’t bother with tracking at all. Sometimes, in order for the fonts in the final result to look the same as in the layout, you need to communicate with the layout designer.

Antiqua- serif fonts. Serifs are horizontal stripes at the top and bottom of letters. They came from old fonts that date back to the days of writing on stone. It's easier to read serifs in books; serifs create horizontal lines, which seem to support the font on the baseline and make it easier for us to run our eyes to read sentences.
Grotesque, or sans-serif font, appeared recently, in connection with the so-called font revolution, when serifs were no longer needed. Grotesque is often used in web fonts and screen things (on phones, for example). It is simpler due to the lack of serifs, it is good to use for continuous typesetting on the Internet. You can use any option in projects; there is no right or wrong option. You need to look at the situation, what kind of project you are doing and what is more relevant for it.
This completes the introductory course on typography for a web designer :)
By remembering only Antiqua and Grotesque, you will already be ahead of many designers in terms of knowledge. Don't stand still, study typography, it's interesting and will help you create cool and neat projects.
Write in the comments what new you learned from this article.

Communication plays a huge role in design. It is very important to create a strong connection between the website and the user himself and then help him achieve his goals. When we talk about communication in the context of web design, we're usually talking about text. Typography is an integral part of this process:

More than 95% of information on the Internet is stored in written form.

Good typography makes information easily accessible, while poor typography requires effort to understand the text. As Oliver Reichenstein notes in the article “Web design is 95% typography”:

Typography optimization is about optimizing readability, accessibility, usability (!) and achieving graphic balance generally.

1. Use a minimum number of fonts

When used more than 3 different fonts your website loses structure and looks unprofessional. Remember that overusing font size and style can ruin any layout.

To prevent this situation, try to keep the number of fonts used to a minimum.

In general, keep the number of fonts to a minimum (two is more than enough, one is often enough) and stick to using the same ones throughout your website. If you decide to work with more than one font, make sure the font families match each other in terms of letter width. Take a look at the example below. The combination of Georgia and Verdana (left) has General characteristics, which allows them to harmoniously combine with each other. Let's take the combination of Baskerville and Impact (right) for comparison. The “heavy” Impact suppresses its “notch” partner.

Make sure font families match each other in terms of letter widths

2. Try to use standard fonts

In font services (for example, Google Web Fonts or Typekit) you can find many interesting ones that will add something new and unusual to your design. Plus, they are very easy to use. Take Google for example:

1. Choose any font. Let's say Open Sans.

2. Generate the code and paste it into

Your HTML. 

3. Done!


But what could go wrong?

In fact, this method has one serious problem - users are accustomed to standard fonts and read text written in such fonts faster.

Usually the best solution is to use system fonts(Arial, Calibri, Trebuchet, etc.). An exception may be the need to stick to some fonts that the client himself specified: for example, for branding or to create something memorable. Remember that good typography affects the reading of the text, not the visual perception font.

3. Limit line length

The correct number of characters on one line is the key to making your text easy to read. When choosing the width of the text, you should focus not on your design, but on the clarity and precision of the written text. Consider this advice from the Baymard Institute:

“If you want your reader to be comfortable, each line should contain no more than 60 characters. Having the right number of characters on one line is the key to making your text easy to read.”

If the line is too short, your eyes will have to change focus frequently, which will disrupt your reading pace. If the line is too long, the reader’s eyes, on the contrary, will have to focus on what is written for a long time. Photo: Material Design

For mobile devices, stick to 30-40 characters per line. Below is an example of two sites opened on mobile devices. On one line contains from 50 to 75 characters ( best quantity characters per line for printed text and computer resolution), and on the second we see the optimal 30-40 characters.

In web design, you can achieve the required number of characters by reducing the width of text blocks using ems or pixels.

4. Choose typefaces that are easy to read at any size

Users will access your site from different devices, which, accordingly, have different sizes and resolutions. Majority user interfaces use text elements of various sizes (copy button, field labels, section headings, etc.). You need to choose a typeface that will look good and remain readable at any size.

Roboto by Google

Make sure the typeface you choose is easy to read on small screens! Avoid using cursive fonts such as Vivaldi (pictured below): although they look beautiful, they can sometimes be difficult to understand.

Usage Vivaldi font makes it difficult to read text on a small screen

5. Use fonts with clear lettering

Many typefaces are designed in such a way that it can sometimes be very easy to confuse similar letters, especially "I" and "L" written in Latin script (as in the image below). In some, the letters are located so close to each other that the combination of “r” and “n” can be mistaken for the letter “m”. Therefore, when choosing a font, test it in different contexts. This way you can make sure that the reader will not have problems understanding the text due to the font typeface.

6. Avoid caps

Text written in caps - or alone in capital letters- suitable for situations where the user is not involved in the reading process (for example, in abbreviations or logos). But in other cases, don't force your readers with all-caps text. As Miles Tinker notes in his famous work“Legibility of Print”, such text is read much slower than text written in lowercase.

7. Keep line spacing to a minimum.

In typography, there is a special term for the distance between lines - leading (or line spacing). By increasing leading, you increase the vertical space between lines, thereby improving the readability of text on the screen. According to the rules, to ensure readability of the text, leading should be approximately 30% greater than the height of the character.

Correct line spacing promotes better readability of the text. Photo: Microsoft

According to Dmitry Fadeev, correctly selected distance between paragraphs increases reading comprehension by 20%. The designer's ability to work with white space allows users to absorb the entire content of the text without missing any details.

Left: The text is written almost flush. Right: Proper line spacing improves readability of text. Photo: Apple

8. Make sure you have good color contrast

Do not use the same or similar colors for text and background. The better the text is visible, the faster users will be able to read it and catch the main points. Consortium World Wide Web recommends using the following ratio for body text and image text:

• Small texts should have a contrast ratio of at least 4.5:1 relative to the background.

• Large texts (from size 14 in bold font / from size 18 and above standard font) must have a contrast ratio of at least 3:1 relative to the background. 


This text does not comply with the standard color contrast, so it is difficult to distinguish it from the background.

This text follows the color contrast standard so it is easy to read.

When did you pick up color scheme, you must give your text to read real users and preferably on several different devices. If testing reveals any difficulties with text recognition, you can be sure that many users may encounter the same problem in the future.

9. Avoid using red or green in your text.

Colorblindness is a fairly common phenomenon, especially among men (8% of the male population is colorblind). Therefore, in addition to color, it is advisable to use some other signs to highlight important information. Also try to avoid using red and green, as these are the colors most often not recognized by colorblind people.

10. Avoid using flickering text

Information that flashes or flickers may cause discomfort to susceptible users. In addition to making you feel sick, this can also cause irritation for many readers, as it will distract them from the reading process.

Don't use flickering text!

Conclusion

Typography is a very important thing. By making the right choices, you endow your website with clarity and clarity. At the same time, the wrong choice can lead to inattentive reading of the text, as it distracts all attention to itself. Typography should be readable, clear and understandable.

Typography should be respectful of the content

This implies that the reader should never feel uncomfortable while reading the text.

Interacting with typography correctly is important for every web designer. After all, text content makes up about 90% of the total content of the site. The text controls the attention of users, carrying not only an informational, but also an aesthetic load. Therefore, it is worth spending enough time on the main aspects of modern web typography, borrowing best ideas by applying them in practice.

Fonts

Typography in web design is subject to certain laws and rules. Many of them concern fonts as the basis for the formation of any text content. Right choice V in this case determines the concept of the project as a whole and influences the perception of the resource by users.

Not so long ago, designers had at their disposal only a few types of fonts that were used to load operating system. Everything else was in flash or image format. There were certain workarounds in this matter. However, they caused a lot of headaches.

A new era in web design began with the advent of the @font-face rule. In essence, it gave designers a free hand, providing an almost unlimited field of activity. However, not all fonts are worth using in web design. Some due to poor readability, others due to heaviness.

Alignment

Justified, center, and right alignment are the worst examples. In the first case, uneven spaces are formed between words; the second and third options produce a ragged, uneven frontal edge, which impairs readability. The gaze has no reference point, and when it is scattered, the information is poorly perceived.

A good option for alignment is to orient the text to the left. This format is appropriate in 99% of cases.

Macro and micrographics

The macro level is responsible for general structure text within the site, location relative to other design elements. His goals are global - to make the text holistic, harmonious and at the same time “alive”.

The micro level is responsible for the area the smallest details: spacing, spaces, indentations, etc. It forms such a concept as readability. Eliminate it and the text will turn into a continuous canvas of letters and punctuation marks.

To designate fonts in web design, it is better to use relative values ​​“em” or %. This allows you to make the content adaptive and flexible. It is recommended to use pixels in relation to non-adaptive containers, when when the screen size changes, blocks move, while the font does not change.

Blocks of text

Paragraphs and blocks of long sentences make it difficult to comprehend information. It is much more convenient when the line includes no more than 70 characters, but not less than 30. Line spacing varies depending on the width of the text line. For the convenience of users, it should not be less than the space between words.

Typeface

When working on typography, you cannot do without variations in the style of letters. When used skillfully, this ability turns into a powerful accent weapon. For example, italics gives the text a certain solemnity, bold outline indicates the importance of information, and the font-variant: small-caps property gives a certain sophistication.

Serif or sans serif

Many designers find sans serif fonts ideal for headings and subheadings. While the main body should be formed in a serif font. This is an unspoken rule, the relevance of which has already exhausted itself.

Please note that the use of a sans serif font is still justified:

• When the readers are children.
• With a bright accent color palette.
• If the text is narrow or too small.

The world of web design has gone through a long process of introducing typographic effects into websites. Such effects a few years ago were either impossible or supported by one or two browsers. Luckily, this has changed and we are enjoying a creative explosion in the use of typography on websites. In this case, the resources remain available and are displayed correctly. Over the past few years, there have been more fonts, design styles, overlay effects, icons and emoji in text making the text more varied, richer, and more expressive.

Large fonts

The use of large bold fonts- trend. It gives the text personality and gradually displaces images from the main positions. Typography is taking a leading role, replacing images and videos, which lose much of their effectiveness on mobile device screens.

Serifs are coming back

Serif fonts are a well-forgotten old thing that Lately has become so popular that it has become something completely new. Large serif fonts are the symbol of 2018! So take the forgotten Clarendon off the shelf, you will need it again!

Typography beyond standard layouts

Trends suggest that brush-drawn fonts are losing popularity. The world of the web is being conquered by 3D styles, illustrated fonts, animated, more lively letters. Designers are abandoning classic grid layouts without hesitation. Texts on websites are becoming more and more similar to typography in publishing design. Let's say "Thank you!" progressive standardization of Flexbox and CSS Grids and the introduction of variable fonts.

First roles in the text

The texts on the site perform not only an aesthetic function. Typography is a way of expressing the personality of a product, its voice and intonation. To enhance this effect, all possible tools are used: icons, emoji, pictograms, audio and image overlay. Text is now so respected that a regular text paragraph can be one of the main elements, sometimes even rivaling the headline.

Text decoration

There are many typical (and completely atypical) ways to format text. I can combine classic underlining and italics in one paragraph different sizes. This is how we put emphasis and strengthen the message. Scattered throughout the text are a variety of mouseover effects, colorful underline effects, outlined fonts, typography changes, switching between serif and sans serif fonts (sometimes in the same sentence), icons, emojis. All this pursues both decorative and semantic goals. A the main task— make the text as dynamic as possible. The combinations of design methods are endless, and many are the result of experiments in today's fashionable trends - brutalism and maximalism.

Evolution of the paragraph

Font sizes and paragraph lengths have been growing surprisingly fast lately. The authors of the article could not restrain themselves and made a small graph about how paragraphs developed in the history of web design.

Typography trends 2018

Here's a little about what typographic trends reign in 2018: