Choosing Web Fonts: A Beginner's Guide

Original author: Google Fonts
  • Transfer
Eliminate the element of mystery in choosing fonts with our step-by-step guide.
If done correctly, typography becomes an incredibly powerful tool. Let us turn to the writings of Robert Bringhurst, whose book The Elements of Typographic Style has been a witty reference book for professionals for decades. There you will find a sublime wording of the craft. According to Bringhurst, typography "exists to respect the content", and proper typography "shows every element, every relationship between elements and every logical nuance of the text."

Maybe these words seem inspiring or intimidating. But the obvious fact is that the right choice of typography always reflects the specific needs of the project itself. These are not only aesthetic needs, but also technical and functional - and you can create very different messages from fragments of text by scrolling through the drop-down list from Alegreya to Zapf Dingbats. Some fonts work better in headings, while others read well in paragraphs. Some families are large enough to accommodate international alphabets and special characters. And if the font comes in different styles (for example, italics or small uppercase) and styles (from the finest Hairline to ultra-black), then as the project is built, it will provide more opportunities for fine-tuning the design.

Of course, there is something to think about, but some of the most important considerations are the practical and functional features of the project. Starting with already known things and going through the following points, you will find a font that meets your needs.

Start with the scale of the project.

Are you starting a project that can last for several months or even years, for example, a magazine? Or is it a one-time project like a slide set, logo or presentation?

Most likely, for a large long-term project (for example, a periodical or newsletter), typography will eventually have to be used for a wide range of tasks. To do this, it is better to take a large family of fonts, including different styles, styles and options like small uppercase and ligatures. Large families simplify branding, because binding to one font will help solve various problems that arise over time without resorting to using extraneous fonts. Try these samples: Alegreya , Alegreya sc , Merriweather , Merriweather sans , Roboto , Roboto condensed , Work sans .

But if this is a short-term project (for example, a poster, album cover or logo), then additional styles, the presence of a compressed and extended version of the font may not be needed. You can even choose a font with one style, if it is suitable for this particular task. Just keep in mind that the versatility of a large family can still come in handy as you fine-tune the text in a short-term project. Try these samples: Bubblegum Sans , Graduate , Scope One , Space Mono .

What should the font say?

Although the number of font options can be limited by the size of the project, excluding fonts without the appropriate versatility or by focusing on highly specialized fonts, there are no clear and simple rules for determining a font with the right aesthetic qualities. It depends on the personality of the font, but individuality to some extent depends on recognition.

Many applications and websites still use a small set of the most common fonts - a relic of the times when this approach was most practical in digital typography. Once the safest option was system fonts, because they are always operational and available on most devices. Today there is no need to compromise and limit yourself to these “workhorses”. Web fonts are generally as reliable as system fonts, but offer a wider variety of choices. Try these samples: Proxima Nova, Helvetica, Museo, Futura, Brandon Grotesque (популярные); Arial, Times New Roman, Courier New, Helvetica, Times, Courier, Verdana, Georgia (system); Gibson , Gotham , Classic Grotesque , Montserrat (web fonts)

But if you are still interested in finding an unusual font to distinguish your project from a number of similar ones, then there are dozens of commercial companies that develop and sell proprietary fonts for a fixed fee or monthly rate. If you want a completely unique, custom-made font - and whoever does not want it - then developing it can be an expensive and time-consuming process, so first of all, find out the prices of manufacturers. On the other hand, any artist you hire will almost certainly cope with many of the problems listed in this guide. Among the free options, you can always look for a less common web font. As a rule, the recently appeared font will not be too widespread - at least for now. Of course, we are not indifferent to Google fonts . Simply scroll through the catalog to get an idea of ​​how many free web fonts there are, and each family page shows how much it is used on the Internet and in which countries it is popular.

How big is the text?

“Designers provide entry - and exit - from the flow of words,” critic Ellen Lupton writes, “breaking the text into pieces, showing the shortest paths and workarounds in the data sets.” In addition to the individual characteristics of the selected font, a well-designed layout also uses visual signals, regularity and variability to naturally guide readers. And choosing a font according to the size of the text can give a lot of signals and quick access options to help readers navigate.

For headings and subheadings, you can choose an expressive, unique, even peculiar font, for example, display, decorative and handwritten styles . Such unconventional, high-contrast designs work well in this context, because the detail and visual complexity help to attract attention. If you want to use fonts without (sans) serifs for short fragments, especially large sizes, then the usual style looks a little inappropriate in this role. Instead, it is recommended to use bold and compressed styles. If you prefer serif fonts, very thin hairline serifs, then usually Playfair Display and Rufina fonts work well in short lines because their high contrast usually attracts the reader’s attention.

A medium-length text, about three to four paragraphs, is actually quite flexible in design, so there are a lot of options. If you're leaning toward a serif font, you can choose something in the old style like Quattrocento , a transitional style like Libre Baskerville, or a squared block font like Arvo . Prefer sans serif? Then the best choice may be something in a humanistic or grotesque style, like Cabin or Railway , and even some geometric styles like Montserrat will work quite well. Try some of them in layout and see what works best in layout.

When choosing a font for voluminous text fragments - more than five paragraphs - it is recommended to use a serif font. This is a traditional choice in book typography, but it also works well on the screen. Typically, old-style or transitional fonts such as EB Garamond and Libre Baskerville are easier on the eyes when reading large texts like news or magazine articles. Although you can use a sans serif humanistic font for long sections of text, it’s safer to bet on familiar serif text that readers can read quickly.

What does size affect?

When choosing web fonts, you often have to start from several considerations. Although the length of the text helps determine the choice of font, but its size is also important. For relatively small sizes up to 16 points, try sans-serif options like Roboto , Montserrat and Railway . Compared to serif designs, these usually have a larger “x-height,” which is defined as the distance between the base and mid levels — usually the height of the letter 'x', which makes the design clearer on small sizes. Sans serif fonts usually have relatively less contrast of lines and a more even line design, which provides them with a more even “color” at a reduced scale when packaging in a small space.

“For a paragraph that should be legible, you shouldn't use a font with ambiguous shapes,” says font designer Octavio Pardo. Decorative fonts like Comfortaa (shown above) are difficult to read in long texts, so they choose well-readable fonts - “workhorses” like Alegreya or Bellefair
You can also understand the overall quality of the font by the letters that usually require more time to design - or simply are lower in the list of priorities. “Look at the shape of the letters 'a', 'g' and numbers,” recommends font designer Octavio Pardo. “These glyphs show risky design options.” They should be bold, but picky. You can afford the extravagant design in low-frequency glyphs like 'v' 'w' 'x' 'y', 'z' and italics. ”

In medium-sized text — subtitles, quotations and smaller headings from 16 to 24 points — it is recommended that you use a sans-serif font in a geometric, grotesque or humanistic style. Хорошие варианты — Montserrat , Lato and Quattrocento sans . Avoid extreme styles that are too thick or too thin to make text easy to read at a glance. If you want a more modern font that doesn't look too booky, look for something without a strong contrast line, such as the slab font family: Arvo , Sanchez, and Slabo .

Fonts for use in large sizes, more than 24 points, are called display. “As a rule, their remarkable features stand out on larger sizes, and on smaller sizes these same features usually interfere with readability. Nevertheless, in almost every genre of typography large text is used if the feelings that the font evokes are appropriate in meaning. This is ideal for a decorative or handwritten font with high contrast lines such as Lobster or Berkshire swash . Try some very geometric, retro, or even grungy font if it sets the right tone. Just avoid fonts with large intra-letter gaps (white area inside the outline of a character like B or q) and a large base height, as these features are embedded to help read small text. As a rule, they look out of place when scaling.

Who is your audience and what languages ​​does it speak?

Remember that your application or website is accessible to users from all over the world. Even if you display content in one language, many use the translation function in the browser to display it in their native language.

“The automatic translation service increases the chances that someone will see your content in another language by almost 100%,” said designer Eben Sorkin, who in recent years has expanded his Merriweather font (shown above) to support more European languages ​​and Cyrillic . “Having specific glyphs for their languages ​​helps users please,” says Sorkin. “The more global your audience, the more likely you are to think about it.”

In other words, if the selected font contains only letters of the Latin alphabet, then the automatic translation will take the typography tool out of your hands by switching the layout of these letters to some other font. The so-called ransom note effect will appear, when individual letters stand out among others. Choosing a font with characters from other languages ​​ensures that the site design remains the same for a wider audience. This may sound defeatist, but in fact, many font families support different scripts.

If your main goal is to prevent the font from changing in the maximum number of styles, consider using the Noto font family (shown above).

Even with basic Latin fonts, it makes sense to check if there is support for the "extended Latin" that is used in certain European languages. Check for diacritical characters such as circumflex (â), acute (á), umlaut (ä), circle (å), and light (ą). There are many others, but choosing a font with extended Latin letters ensures that accented letters do not mistakenly turn into unaccented letters.

The font family should look consistent, even harmonious in different styles - and this is not easy to achieve. When matching two or more scripts, designers need to find a balance between different stories and written traditions. If you plan to use two different scripts next to each other, check out several options for plain text - how these two scripts fit together.

Web fonts like Alegreya , Merriweather , Nunito , Roboto and Quattrocento include a large set of characters, styles and styles, which translates them into the category of "superfamilies". These five "superfamilies" now also support the Cyrillic alphabet . One caveat: as in Latin, some Cyrillic characters are used in only a few languages, such as Serbian or Bulgarian. To support these languages, make sure that the font has extended Cyrillic support.

Other web fonts support more writing systems. Support for Arabic , Greek or Jewish may be important depending on the project. characters. You can find web fonts that support a number of Indian scripts, such as Bengali , Devangari , Gujarati, and Tamil , as well as Southeast Asian scripts like the Thai alphabet . In Google Fonts, you can filter options in the drop-down menu.

How do you rate the functionality of a font compared to its expressive features?

The stylistic range of font families is divided into two parts: functionality and artistic expression (design features). Functionality refers to the range of styles available to change the overall appearance of a font. The functional font should have italics and thin to bold styles. Try these samples: Barlow , Poppins , Libre Franklin .

Fonts for artistic expression (design features) are custom-made specific characters. These include small capital letters, contextual alternates, and various numbering styles. Small caps can come in handy for headers and footers in a specific context. They can add sophistication to the text, adding variety and creating a sense of visual hierarchy. Try these samples: Carrois Gothic SC , Cormorant SC , Patrick Hand SC .

Contextual style options are rarely considered a “necessary” font element, but in several ways they add variety that may be very desirable for your project (see Montserrat Alternates ). If you use italics or a handwritten font, the font styles will make the text more “natural”, adding variety, as in real handwriting ( Caveat , Sriracha ). Alternative characters in serif or sans-serif fonts, on the other hand, can add shades of difference that stand out from plain text.

Depending on the needs of your project, do not forget to compare the styles of numbers in the selected font. The difference between Oldstyle and Tabular (shown above) will affect layout and formatting choices. Monospace digits (Tabular) are often used in tables, while Oldstyle digits are more comfortable to read in paragraphs.

If you plan on using a lot of numbers, keep in mind that there are several different styles for different contexts. Oldstyle numbers are preferable for blocks of text, such as paragraphs. If you look closely, you will notice that some numbers are aligned below the baseline, which orientates the rest of the text. This helps improve the readability of numbers in long lines of text. Monospace digits are centered vertically and the same in width. This helps them to look more correct and consistent in the tables. Also keep in mind that only some fonts contain the right fraction characters. The same applies to over a hundred symbols of national currencies from around the world. Try these samples: Alegreya , Exo , Montserrat , Roboto , Spectral , Google Fonts OpenType format .

What if more than one font is used?

Having learned the basics, you can safely move on to more complex solutions, such as pairing fonts. Mating can be very delicate and complex, even for typography experts, but that does not mean that it should be avoided. “There are an infinite number of combinations, and finding the right pairing can take a lot of time,” said designer Yuen Chien, who led the Google Fonts update last year. There is some pleasure in testing various combinations, so check as many options as you can - the combination that works best may surprise you.

Some couples work well in contrast, and others in likeness. The sharp differences make the layout more dynamic, while using different styles from the superfamily adds visual integrity. If you chose a unique and vibrant font for headings, try something softened and familiar to the main text. The classic version is a sans-serif font for headings and a serif font for body text. Try these options: Alegreya and Alegreya Sans (similarity), Libre Franklin and Libre Baskerville (contrast).

Professional advice: When viewing family pages in the Google Fonts directory, you can try out and customize popular pairs.

Still not decided?

Make a short list and familiarize yourself with the fonts you like. Просмотрите полный набор characters. и стилей для каждого варианта. Check out how they look in Cyrillic or Thai. Find a designer biography and see how this font has been used in the past. First of all, do not underestimate your typographic needs or the requests of your readers. Чем больше стилей, characters. и письменностей поддерживает шрифт, тем лучше вы подготовлены.

Typography is a subtle art, but not as elusive as they say. If you are thinking about organizing your project, its scope and audience, then you are ready to make a reasonable choice in terms of typography.

Several designers shared their experiences in writing this guide: Ewan Chien, Joan Correia, Dave Crossland, Nathanael Gama, Octavio Pardo, Eben Sorkin and Eduardo Tunny.