Russian fonts for web design. The line is too long. Wrong line height

Exists great amount ways to find the right font for your website. For example, you can use services with huge font libraries that require a paid subscription.

If your budget is limited or you're experimenting with a small project, you can take advantage of free web fonts found in free access. Finding the right web font for your website can be time-consuming, so we present you with a selection of the best among them.

1. Montserrat

As typography evolves, it moves away from vintage urban posters and signs. The creator of this font tried to preserve the beauty of the typography of the urban posters she saw on the streets of Buenos Aires.

2. Abril Fatface

Abril Fatface is part of a large font family that comes in 18 styles created for different purposes. This font has a strong, elegant presence, making it a great solution for creating eye-catching headlines. It is most often combined with Lato, Open Sans and Droid Sans.

3. Playfair Display

Given the significant x-height and small descenders of the letters, Playfair Display is also suitable for writing a heading, especially if space is limited. It pairs well with Georgia and is often used with Oswald, Lato and Arvo.

4. GT Walsheim

Used on many blogs today, GT Walsheim is a representative of geometric sans serifs and is part of the Grilli Type family. You have to pay for a full set of fonts, but Grilli Type offers free trial version GT Walsheim.

5. Merriweather

If on-screen readability is a priority for your project, check out Merriweather, which was created for this purpose. In addition, this font is constantly being improved.

6. Josephine Sans

Josefin Sans is inspired by vintage Swedish design and features an elegant, geometric aesthetic.

7. Gravitas One

Gravitas One is based on “UK fat face”, a bold advertising font that appeared during the Industrial Revolution in England. This font looks great in medium to large scale and is suitable for headings, titles and tabs.

8. Jura

The letters of this font repeat the forms of the Kaya-li letter. It also contains glyphs of the Cyrillic and Greek alphabet. It is available in light, normal, medium and bold weights.

9.League Gothic

Originally designed by Morris Fuller Benton for the American Type Founders Company in 1903, League Gothic found a new use with an update and the addition of new glyphs.

10. Fjord

Fjord is a serif font originally created for printed books and is particularly suitable for fitting long text into a small print format. It can be used to create a large amount of text content on the site, as the font has a clear structure, prominent serifs and long, elegant heads and feet.

11. Amaranth

The Amaranth font family features a non-oblique italic design with little contrast and noticeable curves. All three Amaranth styles pair well with almost any other font. You can play with this font - experiment and choose the best.

12. Poly

This medium contrast font was originally created for the indigenous Wayuunaiki language, which requires wide glyphs. It features small extensions and a large x-height, making it particularly useful in non- large sizes.

13. Gentium Basic

This font was created as a multi-linguistic font, including Latin and Greek letters, as well as Cyrillic and advanced support in the Gentium Plus version. Gentium Basic and Gentium Book Basic are available in free web version, but are limited to the Latin alphabet only.

14. Open Sans

Open Sans is a representative of humanistic grotesques. This font is highly legible and adapts to both web and mobile interfaces. This is a non-slanted font with a simple style of letters, which is characterized by a neutral, but pleasant enough appearance that it can be used for a variety of purposes.

15. Ledger Regular

It is a multi-functional font with a large x-height, strong color contrast, and well-defined serifs that contribute to the readability of the text. This font looks good in printed form, and on a low-resolution screen.

16. Signika

This free web font is representative of the sans serif. Low contrast and large x-height allow Signika to display well on screen. The wide selection of icons includes symbols, pictograms and arrows.

17. Josefin Slab

Created according to the canons of a geometric font typical of the 1930s, with the addition of Scandinavian features, Josefin Slab has the characteristics of a slab font and is reminiscent of a typewriter font. Interestingly, its x-height is half the height of a capital letter.

18. Forum

As the name suggests, this is a Roman font that is good for caps lock headings, but also suitable for displaying text. The elegant proportions of this font are reminiscent of classical architecture with its semicircular arches, horizontal cornices and vertical columns.

Named after one of the most famous Mayan cities, Tikal Sans has features of glyphs that were used in the writing of the South American civilization. Its creator chose a large x-height, which gives the font a modern look and has a beneficial effect on its legibility, and a large selection of styles allows it to be used for a variety of purposes.

20. Arvo

Suitable for both print and web, this geometric slab font is available in Roman, Italic, Roman Bold and Bold Italic. Arvo's low contrast enhances its on-screen readability.

21. Bevan

Bevan was created based on the traditional slab font of the 1930s. The letters were digitized and given new uniform and optimized for the web version. This is one of the few super bold fonts that are suitable for websites.

22. Old Standard TT

Old Standard TT was based on the Modern serif font, which was popular in the late 19th and early 20th centuries and then forgotten in for a long time. This font is suitable for adding style to a specific type of content, such as scientific research or texts in Greek or Cyrillic.

23. Creon

Ideal for news websites and blogs, this serif font also shares the characteristics of a slab font, but its balance and low contrast make Kreon significantly more personal.

24. Droid Sans

Droid Sans has been optimized for maximum readability even in small interfaces, such as menus on mobile phone screens. This is a neutral, non-oblique font with simple, open letterforms.

25. Italiana

The creator of this font was inspired by classic Italian calligraphy, so the font will be very useful for projects where you need to add elegance. Italiana is also suitable for writing news headlines in both print and electronic format.

26. Vollkorn

This detailed, feature-rich serif font is very popular. Its clarity and solidity convey confidence and energy, making the font equally effective in larger sizes for headings and titles, as well as large amounts of text in smaller formats.

27. Actor

This font has a particularly large x-height, which requires quite a lot of space. Actor also features an old-fashioned style for some characters, such as the numbers 6 and 9.

With roots dating back to the 16th century, the humanistic typeface Garamond has become a true typographic icon, often serving as the basis for the creation of modern typefaces, including EB Garamond.

31. Ubuntu

Ubuntu Grotesque was created to personalize web text on both desktops and mobile devices. Users are encouraged to experiment with this font, modify and improve it as they see fit.

32. Rosario

Rosario is a classic humanistic sans serif that is perfect for stylizing paragraphs of text.

33. Roboto Slab

Roboto Slab is one of the fonts from the Roboto family. The block version is especially eye-catching with its geometric shapes and open curves. It is equally suitable for gadget screens and printed versions of texts.

34. Oswald

The font is a reworked version of the classic Alternate Gothic sans serif. Oswald was recently updated to come in a variety of weights, an expanded character set, and better kerning.

35. Stalemate

Stalemate is elegant cursive with some vintage flair. It is suitable for creating accents and personalizing your website.

36. Crimson Text

This carefully designed classic proportional font can be used for both displaying large amounts of text and writing headings.

Hello, Habr!

Mountains of articles have already been written describing different aspects of working with web fonts, many working examples have been collected, but every day we continue to face a basic misunderstanding of what web fonts are. Not everyone has time to Google materials on this topic, so I tried to provide answers to frequently asked questions. This material will be of interest primarily to those who have not yet delved into the intricacies of font technologies.

01. Why do we need web fonts at all, why not standard ones?

The first thing that comes to mind is that standard fonts are terribly boring, and it’s difficult to do something original with their help. As a rule, most of them bring melancholy and despondency not only to users, but also to web designers. In this case, non-standard fonts are more expressive and, in addition, there are an order of magnitude more of them, so there is plenty to choose from. Moreover, the font is an integral part of the brand, so every company strives to use it more actively, since such a technical opportunity has arisen.

And one could completely abandon standard fonts, especially since many mobile operating systems do not support them (for example, Arial, Taһoma, Verdana and Georgia). But, unfortunately, the industry, which has been adapting to 96 DPI screens and Georgia verdans for many years, was not quite ready for rapid changes, and on older Windows operating systems there are still problems with displaying non-standard fonts due to the peculiarities of the rasterization mechanism.

02. How to choose a good web font?

A font is not just a digitized set of letters created with a brush on paper or in Illustrator, it is also 98% of fine-tuning and polishing, hinting and testing for various media and in different sizes. This font looks good, its style is polished, there will be no problems with it either on the printer or on the screen, it exudes good quality.

However, when choosing a font, much higher value It is not even this that matters, but the expediency and compliance of the font with the method of use and the tasks assigned to it. If you work with fonts, you need to understand how it all works what technologies are used. This will help you not to keep in your head a bunch of incomprehensible memorized rules, captured in fits and starts. For example, every self-respecting printer knows why it is undesirable to use TrueType fonts for offset printing, which fonts can be used as text fonts, and which ones - only for headings or indexes. If he doesn’t know this, then he will have to reprint a huge print run, and constant surprises and problems will await him at work. It's surprising why no one makes any demands on web designers.

03. How do browsers render fonts?

Quite often I heard that browsers draw fonts themselves, so they look different everywhere. But in fact, fonts are rendered by a special graphics subsystem OS: on Windows it is GDI or DirectWrite, and on OS X and iOS - CoreText(and formerly QuickDraw). There are 3 common font rasterization (rendering) mechanisms: two-color (black and white) pixel, monochrome pixel (often called antialiasing or regular anti-aliasing) and subpixel. Subpixel uses the feature of LCD and plasma displays, where each pixel is divided into 3 parts (red, green and blue), in order to increase the horizontal resolution of the rendered image and improve clarity.

However, browsers do choose their own rendering method from those provided by the OS. For example, GDI has 3 rendering options: black and white, regular anti-aliasing and subpixel ClearType. The peculiarity of the latter is that smoothing occurs only horizontally, in accordance with the location of the subpixels. This is why we often see terrible jaggedness on the horizontal and diagonal strokes of the font when using it. Fortunately, Microsoft began to slowly improve the mechanism, and GDI was replaced by DirectWrite technology, which did introduce vertical anti-aliasing. Compare:

04. TTF or OTF?

TrueType and PostScript - these were originally different formats fonts. TrueType uses quadratic Bezier curves, while PostScript uses cubic curves, which are familiar to designers working in Illustrator and Photoshop. Today, both methods of describing curves are used as part of the same OpenType format, with the only difference being that TrueType files have a TTF extension, and PostScript files have an OTF extension. Each technology has its own hinting features and application specifics.

Look at the picture. If a TrueType font is much more readable in a small size, but in a large size we see characteristic teeth, then for a PostScript font everything is exactly the opposite. This happens because for PS and TT browsers choose different methods rasterization. For PS, the browser applied regular monochrome anti-aliasing, and TT was processed with ClearType. So it turns out that TrueType will be preferable for text fonts, and PostScript is better for headings and large inscriptions.

We also see that not all browsers use DirectWrite yet. So, it is still not in Google Chrome.

05. What else affects the display?

Sometimes it is better to set the rasterization method manually. For example, in browsers with the Webkit engine, you can use the CSS property - webkit-font-smoothing and manually enable regular anti-aliasing instead of sub-pixel anti-aliasing, and vice versa. There are also non-trivial ways to get the browser to change the rasterization method; on Habré they once suggested using a hack with text-shadow .

We must not forget about the font size (font-size). Outline shape, stroke contrast, and readability can vary greatly between font sizes. Put down the graphics editor and see how the web font looks in the browser, in combat.

Another way to mitigate the shortcomings of anti-aliasing is through color and contrast management. To reduce the effect of chromatic contouring (when using ClearType, yellow and magenta outlines appear around the edges), you can try to reduce the tonal contrast by making the background color closer to the text color. Do not get carried away too much, remember about users with low vision.

06. Do web fonts need hinting?

Hinting is special instructions that rigidly bind the abstract curves of a font to pixels on the monitor. The vast majority of fonts (including commercial ones) are not hinted, because this is a rather labor-intensive and complex procedure. Hinting is performed differently for TrueType and PostScript. If you take a cheap font, the OTF format is safer, because in TT the procedure has remained unchanged since the days of black and white rasterization and is not entirely adequate, but for PS the procedure is simpler, and the author has the opportunity to do automatic hinting.

A font without hinting becomes blurry when rasterized, and the height of the letters may jump.

On the one hand, a font with hinting is quite clear, contrasting and uniform, but on the other hand, letter shapes are distorted depending on the size, and the spacing may differ from real ones. Letters strictly obey pixels.

In Windows OS we see perhaps the most radical approach: such popular fonts as Tahoma, Verdana, Arial and Georgia were hinted specifically for GDI ClearType, and when DirectWrite appeared, the main fonts included in the OS had to be re-hinted and updated.

Unlike Microsoft, Apple takes the opposite approach, so its operating systems use algorithms that allow any font to be displayed more or less efficiently, and hinting is not taken into account at all.

To answer the question: the era of 300 DPI monitors is rapidly approaching, and a huge number of mobile devices already have this resolution, and soon hinting will not be needed at all. But since Windows still remains hint-dependent and focused on low-resolution monitors, try to choose high-quality hinted or standard fonts for text, otherwise the text will be unreadable and difficult to understand.

07. @font-face or Cufon?

No matter how strange it may sound, there are still people who ask themselves this question. It would seem that after browsers began to support the @font-face attribute, all other font embedding technologies (Cufon, sIFR, Flash) seemed to become irrelevant. But some meaning still remains, for example, a way to replace a font with an image, when not vector curves are displayed on the site, but only a print, like a printer prints it on a sheet or Photoshop outputs an uneditable JPG. This is permitted by many regular (desktop) font licenses. Some font manufacturers (for example, Adobe) allow the desktop font to be embedded (in programs and on the server), as long as it remains protected and cannot be downloaded. If you are unable to purchase a separate web license, then you can use the appropriate sIFR when the font is embedded using Flash objects. The disadvantage is that it uses Flash, which is not supported by all devices. You can also use Cufon technology (Canvas is used), if the license allows. Of course, in this case the script will be cumbersome, and text selection will not work, but in a desperate situation it will do.

But it is best to use @font-face, it is both more technologically advanced and more convenient, and in addition, sufficient experience has been accumulated to work with it. It has only one drawback: not all manufacturers allow their fonts to be used on the web.

08. What formats should font files be in?

Today, fonts prepared for implementation (@font-face) on a website should be in several formats:

TTF or OTF- a font file that is familiar to us, but loaded from the server while viewing the site;
WOFF- unprotected source archive OTF or TTF, perhaps the most important format that most people support popular browsers, and files in WOFF are usually 2–2.5 times lighter than the original ones;
EOT- an archive implemented by TT OpenType, which has protection mechanisms, is needed to support older Internet Explorer browsers (starting from IE8, in addition to TrueType curves, PostScript is also supported);
SVG- to support the Safari browser.

09. Can web fonts be converted?

No matter what people tell you, you can't just convert the file and save it. original quality font, especially if it was originally in OpenType format. In the process, there is a chance of losing some data embedded in the font file (compiled instructions, additional signs, metrics). You will notice this when the file suddenly “loses weight” during conversion; it is especially unkosher to convert TrueType to PostScript and vice versa.

Additionally, the conversion process almost always violates the non-modification terms of the license. Simply put, this is the same as theft. When you throw files into the converter, rest assured that it will not miss them and will issue a warning, because the file contains the manufacturer's digital signatures and corresponding modification restrictions.

10. How much should web fonts weigh?

The browser must fully download the font files before displaying the page. Perhaps you have seen the “font flash” (or FOUT) effect, when for a short moment, instead of exotic fonts, standard system fonts flash. It’s normal if TTF (OTF) fits into 100 kb, and WOFF (EOT) fits into 50 kb. Always think about whether you need to use custom fonts at all, even if you use it in 1 short title, you will still have to download the entire font file.
The more perfectionism there is in design, the smaller font files can weigh, and try to choose simple shapes. In this sense, the ideal form is an open geometric grotesque with low contrast. To speed up font loading, it can also be useful to include it in the style file using data:uri.

11. How many font styles can be used on the web?

From a designer's point of view, a lot of typefaces are cool. And indeed, for the header - Bold, and over there, for the inset - ExtraLight, we’ll generally push unnecessary texts and press them into Condensed Bold. Here it is - real wealth and stylistic diversity. But when all this “wealth” begins to be transferred to the site, it turns out that everything is terribly slow. And it’s better not to even try to open such a site from a mobile device. And don’t forget that each style costs separate money, and it is likely that the customer will ask you to either find a font synonym, or reduce the number of styles, just so as not to buy all the expensive typeface. It is normal to use a maximum of 2-3 styles of the same or different typefaces.

12. Is it necessary to limit the character set?

The answer to this question depends on what kind of site it is and how it will be used. Restrictions can be useful because it is possible to significantly reduce the size of files. Sometimes, due to ignorance, developers upload heavy font files to the site with its full set of characters, and it’s good if there are no hieroglyphs (note, the Arial Unicode font containing most of the characters from the Unicode table weighs 22 MB).

For those who make English-language sites the easiest, they don't need to load additional characters at all, the ones in Basic Latin (or ASCII) are enough. If you use the font only for headings in Russian + inclusions of English, then ASCII (Basic Latin) sets and 64 characters of the Russian alphabet will be enough for you; it is not at all necessary to load the Cyrillic Extended set of 420 characters. It's a completely different story if your site is multilingual, in which case, to avoid incorrect display of characters, you need to try to cover all the languages ​​used.

13. Can I use font clones?

It happens that buying the original font is either too expensive or even impossible, then it will be appropriate to choose a font synonym (clone). Of course, you shouldn’t expect amazing quality from them, even if they are made, say, by a famous Russian company. Everything is completely bad when you come across the opus of some anonymous literate person who decided to try himself in a new field, beware of such fonts. Here are examples of clones (the original is indicated in brackets): FreeSet (Frutiger), Pragmatica and Helios (Helvetica). Please note that letter shapes may vary. There are a large number of clones in the Paratype font synonyms directory.

14. How to test a font?

Designers, don’t get used to seeing fonts only through Photoshop windows, graphic editors use their own methods of text smoothing, and you can be deceived by a beautiful picture. It is much more useful to learn how to test and watch them in browsers. If there is a demo page, be sure to make sure that all sorts of artifacts and spikes do not appear during rendering. There is also a tool called Typecast, where you can check many fonts and then show the page to the client. For those who choose new font for a ready-made website - the Web Fonts Previewer service is indispensable for you; you can test any font on a live, working website, as if you had already implemented it.

15. I have a font on my computer, can I use it on the website?

First, a little about theft. I know a lot of designers who have thousands of fonts on their computer, the origin of which no one knows. As a rule, they simply downloaded it from the Internet. But for some reason no one thinks that the creation good fonts- these are months and sometimes years of serious work! But this is not the only reason why you should not use fonts that are scorched and taken from unknown sources, but also because you may encounter serious difficulties at the development stage.

If you want to embed a font that comes with the operating system into your website, you can only do this by rasterizing it or using it in images. If you really need to embed, then you will need to buy a separate license, just like regular fonts(both Georgia and Tahoma are on sale).

16. How to buy a web font?

When you "buy a font" the closest thing to buying software is that you receive a license to use it, rather than the rights to the program file itself. It turns out that a legally compiled font file is a program. Modification or alteration unless permitted by the license is considered copyright infringement.

A convenient way to purchase fonts is through font catalogs (Fonts.com, MyFonts, Ascender, Typekit). You will be able to view, compare and select one of the available options for use, and pay by card. The easiest way for companies would be to directly contact the production studio or leave the purchase of fonts to the customer

Or maybe it’s better not to spend money on a font at all? There are many wonderful free fonts, which are in no way inferior to paid ones!

17. What types of licenses are there?

Exist different types font licenses, and with the advent of web fonts their variety has only increased. In real life, each company sets the rules of the game itself, and a font license may contain features of various others. We will be interested in typical ones.

A regular commercial license limits use on a certain number of devices and allows distribution of works created using the font. These can be magazines, newspapers, leaflets, business cards, rasterized images of font - all together we can call them prints. This license is not suitable for film, television, web and embedding in applications and programs; such rights must be purchased separately.

There are also specific licenses, for example: a license with exclusive rights. In this case, the company buys all rights from the type designers, and even the author of the font does not have the right to use it anywhere. It is especially surprising when such fonts are on torrents, or when some third-party designers use them.

Free licenses (public domain) - the author of the font allows free distribution, with or without the condition of indicating his name (Creative Commons) (for example, OFL, GPL, Apache 2.0). This type of license even allows commercial use, except for sales and paid distribution. Examples: PT Sans, Opensans, Droid. Sometimes modification of a font is allowed (GPL), but the modification you create automatically inherits the same license (meaning you can be forked too). Freedom assumes that it can be used on any media, incl. and web.
Free for non-commercial use - that is, you can use it in all cases where you do not make money from it. For example, for training, hobbies and community projects. Sometimes, manufacturers allow use for designers, in the hope that happy client the designer will then buy a commercial version of the font.

18. How are licenses different for web fonts?

Web licenses are our favorite, they are either in addition to the main license or are given separately. Regulates a special case - the use of fonts on websites. As a rule, the most important limitation is on the number of page views. For example, 10 thousand per month, 100 thousand or 1 million. That is, the more people visit your site, the more you pay for the license. There are also unlimited options, when you pay for the font once, but they are many times more expensive. You probably wondered, does anyone keep track of the number of views? Most often not. But do not forget that a huge number of counters monitor your site traffic and, if you arouse the seller’s suspicion, you may lose your license.

And yet, a separate web license does not allow use on regular computers. Sometimes a web license is issued free of charge, that is, at the same time as purchasing a desktop font, you get the right to use its web version. But this is still rare; the vast majority of manufacturers require an additional fee.

After purchase you receive special files, which you embed into the site (TTF, OTF, WOFF, EOT), and some fonts do not allow these files to be placed on the site in an unprotected form, since theoretically third parties could obtain the font files themselves. The third option is that you use a special web service of a font manufacturer, for example Typekit, company-owned Adobe, and pay a subscription fee.

19. Where can I get good web fonts?

Catalog of free fonts from Google
Fontsquirrel is a famous web font converter and directory
Myfonts- huge store fonts with convenient system payment
Fonts.com is the main competitor of MyFonts
Typekit - a service for renting fonts from Adobe
Typecast - the aforementioned store with testing service
P.S. another useful resource recommended by ilyaerin, WebFont.ru Functionality over form: designing for the reader
Maria Doreuli. Licensing. To make it clear
Tim Brown. Type rendering on the web
Tim Brown. CSS properties that affect type rendering
Tim Brown. Type rendering: operating systems
Tim Ahrens. A Closer Look At Font Rendering
Tim Ahrens (Typekit). A closer look at TrueType hinting
The Benefits Of OpenType/CFF Over TrueType

Ildar Kinyabulatov, web designer ADV/web-engineering

• Translation

Now is the time to level up your design with web fonts

Without exaggeration, online typography is currently experiencing an exciting period in its life. Recent technological leaps have brought us one step closer to typographic nirvana on the internet. The step everyone has been waiting for for so long.

The freedom to use web fonts outside the safe list on all leading operating systems is now possible by by and large, thanks to three major, almost simultaneous technological factors: widespread support for the @font-face rule in browsers; the emergence of such “font repositories” as Typekit and Fontdeck; creation of a new font format - an archived WOFF font file.

* Few of these fonts are for Cyrillic, so this selection is more suitable for “outsourcers”. Let's hope that at least some of these and other fonts for Slavic languages ​​in Cyrillic will soon appear. Add tags

Communication plays a vital role in design - it is important to establish a clear connection between the website and the user and help them achieve their goals. When we talk about communication in the context of web design, we usually think about text. Typography plays a vital role in this process:

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

Good typography makes reading effortless, while bad typography turns users away. As Oliver Reichenstein states in his article “Web design is 95% typography”:

Optimizing typography is optimizing readability, accessibility, usability (!), and overall graphic balance.

In other words, by optimizing your typography you will also optimize your user experience. In this article, I will provide a set of rules that will help improve the readability and legibility of your text content.

Using more than three different fonts makes the site look unstructured and unprofessional. Keep in mind that too many font sizes and styles at once can also ruin any layout.

To prevent similar situation, try limiting the number of font families to a minimum

In general, limit the number of font families to a minimum (two is a lot; one is often enough) and stick to them throughout your website. If you use more than one font, make sure the font families complement each other based on their character widths. Below is an example of font combinations. The combination of Georgia and Verdana (left) has similar meanings that create a harmonious combination. Compare this to the pair Baskerville and Impact (right), where the heavy weight of the Impact font significantly dwarfs the other font.

2. Try it use standard fonts

Font embedding services (such as Google Web Fonts or Typekit) have many interesting fonts, which can give your projects something new, fresh and unexpected. They are also very easy to use. Take Google for example:

1. Choose any font, for example Open Sans.
2. Generate the code and paste it into your HTML document.
3. Ready!

So what could go wrong?

In fact, this approach has one major problem - users are more familiar with standard fonts and can read them faster.

Unless there is a specific need for a custom font on your website, such as for branding purposes or creating an impressive experience, it is usually best to use system fonts. A win-win option is to use system fonts: Arial, Calibri, Trebuchet, etc. Keep in mind that good typography draws the reader to the content, not the font itself.

Having the correct number of characters on each line is key to the readability of your text. Your design shouldn't dictate the width of your text. This should also be a matter of readability. Check out this tip on readability and line length from:

“You should have about 60 characters per line if you want to get good experience reading. Having the right number of characters on each line is key to the readability of your text.”

If the line is too short, the eye will have to return too often, disrupting the reader's rhythm. If a line of text is too long, it will be difficult for the user to focus on the text. Image: Material Design

For mobile devices, you should use 30–40 characters per line. Below is an example of two sites viewed on a mobile device. The first uses 50-75 characters per line (the optimal number of characters per line for printing and for the computer), and the second uses the optimal 30-40 characters.

Image: Usertesting

In web design you can achieve optimal quantity characters per line, limiting the width of your text blocks using em ( relative unit measurements) or pixels.

4. Choose a font that works well in different sizes

Users will access your site from devices with different screen sizes and resolutions. Most user interfaces require text elements of varying sizes (button text, field labels, section headings, etc.). It's important to choose a font that works well in different sizes to ensure readability and usability at any size.

Make sure the font you choose can be legible on smaller screens! Try to avoid fonts that use cursive writing, such as Vivaldi (in the example below): although they are beautiful, they are difficult to read.

In many fonts, it is all too easy to confuse similar letter shapes, particularly “i” and “L” (as seen in the image below), and small spaces between letters, such as when “r” and “n” look like “m”. So when choosing a font, be sure to test it in different contexts to make sure it won't cause problems for your users.

Text written entirely in capital letters – great in contexts that don’t involve reading(such as acronyms or logos), but when your message involves reading, don't force your users to read text written in capital letters. As mentioned by Miles Tinker in his landmark work “The Ease of Typing,” text written entirely in uppercase significantly slows down viewing and reading speed compared to lowercase.

In typography, we have a special term for the distance between two lines of text - leading or line spacing. By increasing line spacing, you increase the vertical space between lines of text, typically improving readability in exchange for valuable screen real estate. As a rule, for good readability, line spacing should be 30% greater than the height of the characters.

Good line spacing improves readability. Image: Microsoft

It has been proven that correct use Space between paragraphs increases comprehension by up to 20%, as noted by Dmitry Fadeev. Ability to use empty space is to provide users with an easily digestible amount of content and then remove extraneous details.

Left: Text whose lines almost overlap each other. Right: Well-chosen spacing promotes readability. Image: Apple

8. Make sure you have enough color contrast

Do not use the same or similar colors for text and background. The more visible the text, the faster users can view and read it. The W3C recommends the following contrast ratios for text and text in an image:

• Small text should have a contrast ratio of at least 4.5:1 relative to the background.
• Large text (at 14 pt bold / 18 pt regular) should have a contrast ratio of at least 3:1 relative to the background.

These lines of text do not follow color contrast guidelines and are difficult to distinguish from the background colors.
These lines of text follow color contrast guidelines and are easy to read against background colors.

Once you have chosen a color, it is imperative to check it with real users on most devices. If any of the tests show a problem with reading your text, you can be sure that your users will have a similar problem.

Color blindness is a common condition, especially among men (8% of men are color blind), it is recommended to use other cues in addition to color to mark important information. Also avoid using only red and green colors to convey information, since red and green color blindness is the most common form of color blindness.

Content that flashes or flickers may cause seizures in susceptible individuals. Not only can this cause a seizure, but it will likely be annoying or distracting for users in general.

Avoid flashing text!

Conclusion

Typography is important. Choosing the right typography can give your website a crisp and polished feel. On the other hand, poor typography options distract the user and tend to draw attention to themselves. Typography is very important readable, understandable And legible.

Typography exists to provide content.

Typography should deliver content in such a way that it never adds cognitive load to the user.

Do you have your own tips for typography in web design? Or would you like more information about the issues mentioned above? Let me know in the comments below!

Subscribe toUX Planet:

Web design is a complex field that provokes constant controversy. Some will say that to attract attention your landing page simply needs modern design, incorporating the latest trends. Others believe that a functioning landing page, where visitors get what they came for, is much more important.

Both options are correct, but a lot depends on your field of activity and the goals you have for your landing page. How to determine which option is right for you? How to make sure that your designer knows his business and won’t make mistakes?

This post contains seven “deadly sins” of web design that you should avoid in your landing page. Study these principles carefully, and use them to check whether your design is truly optimized to achieve your business goals.

1. The font is too small

Many people make the first mistake of making the text on the resource too small. In the early days of the Internet, most websites used 12 pixel fonts, which was a standard that almost everyone followed. However, over time it became clear that such small print was difficult to read. In addition, it turned out that you need to attract and interest the visitor almost immediately.

According to market research, the average attention span of Internet users fell to 8 seconds in 2013, which is a second less than that of a goldfish. The same study reported that website visitors only read 28% of words on average.

A 2013 study found that the average attention span had dropped to 8 seconds, 1 second less than that of a goldfish. Is it possible?

To immediately attract the attention of visitors, you need to:

• Create strong, interesting headlines.
• It’s interesting to write so that you want to read more than 28% of the content.
• Use a fairly large font for headings.
• Make sure that the main text is written in an easy-to-read font.

For all of the above points, the following is relevant: font size has increased over the past few years. Now the minimum standard is 14px, but many sites use at least 18px font, especially if we're talking about about large texts.

By the way, from now on you no longer need to open the Google Fonts service to get third-party fonts for your landing pages, because now the fonts are connected directly from . We have added all the fonts from the Google Fonts collection to a visual gallery, and all you need to do is select the appropriate font, click on the connect button and use it for new or existing texts on the landing page:

Below we provide some examples excellent web design with perfectly sized fonts.

Conscience

Heading: 50px
Subtitle: 36 pixels
Body text: 21 pixels

Header: 80px
Subtitle: 24 pixels
Body text: 15 pixels

Header: 60px
Subheadings: 35 px
Body text: 18 pixels

Don’t forget: the content on the landing page is written to be read. This is not why you paid for the services of a copywriter or pore over the texts yourself to make them ineffective due to the small font. Make sure you select a readable size.

It's also worth remembering that different types of fonts vary in size - a 16 pixel Arial may be smaller than a 16 pixel version of another font. Choose the font size and type that suits your site.

The font of the footer text can be small, but if you want visitors to read what is written there, choose a font of at least 16 pixels.

Advice from the professionals: To choose the right font type and size, download the WhatFont app. This is a plugin for Google Chrome that determines font parameters by clicking on it. Open sites whose designs you like and collect information.

2. Sliders

It's hard to understand why so many landing pages still use moving sliders. It works? Is your conversion growing? Is information conveyed better?

In most cases the answer will be no.

Peep Laja, founder of one of the most famous blogs on ConversionXL, quotes experts in the field of Internet marketing in the article “Don’t Use Automatic Image Carousels or Sliders”:

“We have repeatedly tested dynamic blocks and are convinced that this ineffective way content positioning"— Chris Howard, CEO of WiderFunnel.

"Dynamic banners - absolute evil, and they must be removed immediately"— Tim Ash, CEO SiteTuners

Laya also mentions two studies that have proven the ineffectiveness of dynamic sliders.

The first study was conducted by usability guru Jakob Nielsen. He conducted a survey of Siemens website visitors about a special offer about washing machines on the main page. The message about discounts was written in a 98-pixel font, but, unfortunately, visitors did not notice it - the offer was lost in the switching blocks of the slider.

This experiment confirms the opinion of reputable marketers that sliders reduce the audience’s receptivity to the offer and content. People got used to sidebar banners and stopped paying attention to them - the same principle works for dynamic sliders.

The second study was conducted at the University of Notre Dame (Indiana, USA). Researchers have found that about 1% of website visitors click on the slider, with 84% of clicks coming from the first slide.

Why place a slider that will take up valuable real estate on the home page and only get a 1% CTR? Why annoy visitors with flashing images that are difficult to follow? Perhaps it is worth offering them one option if the majority will already choose the first image of the slider?

So why, despite being so ineffective, are sliders so popular?

Most likely because they look advanced, technologically advanced and do not pose any difficulties for developers. This is how it works - the client says: “I want this thing with scrolling pictures on the main page. Yes, a dynamic slider,” and web designers comply with the request, because the slider really looks good and is extremely easy to make.

But it is the owner of the landing page/site who must be aware of whether this slider will be effective and whether it is really The best way conveying information. Pip Laya, Chris Howard, Tim Ash and many other famous Internet marketers no longer believe this.

The solution to the problem should not be to copy the layout you like in detail, including the slider on the main page, but to try to independently answer the question: “How should your offer be presented?”

A striking example of this approach is the website of the tutoring agency Genesis Tutoring - or rather, the process of its development. The founders of the company initially advertised the service by distributing flyers in schools, then they decided to create their own website and turned to a designer. They wanted to install a slider on the home page with a copy of the advertising flyer. The designer managed to convince customers to abandon the slider and install just a copy of the flyer on the main page, adding contacts and a CTA button for feedback. This is what happened.

A laconic page with an excellent design and high conversion I got by quite well without the slider. Excellent work, isn't it?

To achieve similar results, follow these rules:

• Don't place a slider just because everyone else is doing it too (even if your designer recommends it).
• Instead of copying competitors' pages, find own version presenting information most suitable for your purposes.
• Choose one, the most attractive offer, and place it above the fold line. You can promote the rest by adding special button at the top or in separate blocks lower on the page - one offer should catch your eye, the rest will be done by the landing page.
• This next point can be hung in a frame on the wall: Determine the main goal landing page. All CTA buttons should follow the “one page, one goal” principle.

3. Low-contrast fonts

Another big mistake is using low-contrast fonts.

Low contrast is light text on a light background or dark text on a dark background. There may be some combinations that work well for print design, but on the Internet it's always a bad idea.

The content of the landing page should be as readable as possible. According to research, with age, the cornea of ​​the eye transmits less and less light: at 40 years old, half as much light passes through it as at 20 years old; by 60 years old, the amount of light entering the eye is reduced by another 20%. And now p Add to this people with more serious vision problems.

Given these numbers, do you really want to make your content more difficult to consume, especially after spending so much time and money trying to attract visitors?

Always use contrasting fonts: light on dark background and vice versa. Occasionally there is a need to use a colored font other than black or white. Sometimes designers use a light gray font on a white background and a light blue font on a dark blue background. For what? Is it really easier to read this way? Or have external effects become more important than the content of the text? Books are printed in black ink on white paper for one simple reason - it’s easier to read. Landing pages and websites must follow this rule.

Below are examples of landing pages with low text contrast:

Winnie the Pooh

Cargomart

This is an example of contrasting text, but it is located on top of the image, which often creates interference for perception.

Remember: all texts must be contrasting with the background on which they are placed. If the text seems hard to read or doesn't have enough contrast, don't waste time asking your designer to fix it. Your landing page - not a platform for color exercises, it is a sales and conversion tool.

Additional tip: It’s not just text contrast that’s important. Also be careful when using reverse fonts. Reverse font is white text on a black (or colored) background instead of black on white.

David Ogilvy, the greatest marketer of our time, argued that advertising text Reverse font should never be used. Colin Wheeldon, editor of Australia's largest automotive resource, decided to test this theory. The results he obtained are amazing:

• black text on white background: 70% good, 19% fair, 11% bad
• white text on black background: 0% good, 12% fair, 88% bad
• white text on purple background: 2% good, 16% fair, 82% bad
• white text on blue background: 0% good, 4% fair, 96% bad

Surprisingly, the results of black text on a white background are almost the opposite of the reverse combination!

4. Wrong line height

Line height is usually overlooked. Most designers carefully choose the font, size, and set the line height arbitrarily.

But this parameter has an unexpectedly strong impact on the design and perception of the landing page. Line heights that are too small can create the impression of cobbled-together text and ruin the entire design.

The good news is that an experienced web designer will have plenty of past experience and will be able to select the appropriate line height by eye.

The bad news is that a mid-level designer may miss the problem and choose the wrong solution.

Chris Pearson, designer of the DIYThemes project, took this problem seriously and created a calculator that calculates line height using the golden ratio principle. Just enter the font size and line width, and the calculator will calculate the ideal height.

You may not be aware of why you like a certain design (or font). Talented designers find the proportions of the “golden ratio” themselves; Chris Pearson’s calculator will help others.

5. The line is too long

Another one possible error— text width is too large.

Is there an optimal line length?

Too short - they strain the eyes, which quickly tires.

Popular in Lately responsive design makes this problem even worse. If the maximum line length is not limited, your blog post or any other type of text, depending on the screen size of the device, can take on very strange shapes.

To solve this problem, the Baymard Institute recommends setting the maximum text width to 516 pixels, which, using an 18 pixel font, is 65 characters per line. These most comfortable text parameters for reading online are shown in the picture below

Again, not all designers pay attention to this parameter, but since you are already aware that too long lines of text can scare away the reader, check the creation of the designer and programmer optimal conditions for text comprehension.

Next on the list of web design sins is neglecting color accents.

Experienced digital marketers know that to attract attention, a call to action button must be bright. Whether you're encouraging "Buy" or "Try for Free," these buttons need to be eye-catching to get visitors to click and take the expected action.

It seems simple. But often designers do not use bright accent on the most basic CTA buttons, instead choosing one of the main colors of the landing page.

• The button should be bright enough to attract attention.
• The button must be an additional (complementary) color to color scheme landing page - this is necessary so that the colors do not conflict. Complementary colors are located on color wheel opposite each other. If you place them side by side, they seem to look brighter.
• The button should stand out from the background of the site. A blue button on a blue background is a bad idea.
• The button should be used for the most important calls to action. Don't use this element too often on the page.

In the image below, the call to action button is orange. It stands out against a white background since orange is no longer used in website design (except small detail logo, but it is small enough to attract attention).