Typography is the cornerstone of any design area. Of course, it is one of the most important elements of any project. But contrary to common sense, work on typography is postponed to the very last moment, or not taken into account at all. Many designers are afraid of typography, and the result is either a useless design or the designer is simply obsessed with the using one or two “proven” fonts in his work. This guide aims to make a difference.
The ability to correctly present the text on the website’s pages is not a gift from above. Yes, unfortunately or fortunately, but the rules exist even in this field. And to create a successful project, you need to know them. The Internet is text. It is words. And these words should look amazing. If done correctly, typography becomes an incredibly powerful tool. However, this is more than just choosing the right font. This is, first of all, ease of use. It is necessary to choose and combine sizes, types, and styles of fonts to create a graphic hierarchy in the design. Choosing the right typography always displays the certain needs of the project. These are not only aesthetic needs but also technical and functional – you can create very different messages from text fragments. In other words, by optimizing typography you also optimize the user interface.
This guide is intended for anyone who asks the question “How to choose the right font?”. Everything will be very accessible and gradually. It will suit those who don’t have any special artistic or technical education, any coding skills and experience in the web design industry. Nevertheless, it will be also useful if you are engaged in web-design but you still have much to improve. Starting with things already known and taking into consideration the following tips, you will find a font that fits your needs.
So, ladies and gentlemen, welcome to the fonts tutorial for beginners. Take your mouse and sit comfortably at the keyboard – reading promises to be interesting and informative. Coffee brewing is optional, but still worth it.
Fonts Classification And Other Scary Words
The first thing I would like to draw your attention to is the main classification of fonts that almost all designers use. Let’s go!
Sans-Serif fonts. According to Wikipedia, it is a large group of fonts that doesn’t have extending features called “serifs” at the end of strokes. At first, they appeared in the late eighteenth century. Initially, they were applied exclusively as decorative fonts but in the twentieth century people started to use them for typing. You can find a list of sans-serif fonts following this link.
Serif fonts. As you can already guess, this is the opposite group to the first one – fonts with serifs. Serifs are one-sided and two-sided. Their shape can be varied: triangular, rectangular, rounded, decorative, in the form of a thin horizontal line, and so on. Readability of serif fonts from the monitor screen is still a controversial issue, and some designers prefer not to use this typeface for large blocks of text. You can look at the list of serif fonts here.
Accidental (display) fonts. Their main distinguishing feature is that they are not suitable for typing the main text and are intended for title pages, labels, posters, headings, and other small passages of the text in order to attract and emphasize attention. Accident fonts can be formal or informal and reflect any mood. Gothic fonts, imitating medieval handwritings with a wide-nib pen, can also be attributed to the accident ones. Click this link to check the list of display fonts.
Script (handwriting) fonts. As you can see from the name, these fonts imitate someone’s handwriting or calligraphy style. There are two subtypes: formal and casual. All formal ones have something in common – an elegant, noble typographic design. These fonts are not suitable for typing basic texts. Casual handwriting fonts are more modern. They are not so strict in shape, with broad strokes and often resemble an imitation of a letter with a soft brush. View a list of script fonts here.
Proportional and monospaced (fixed-pitch) fonts. In proportional fonts, the width of the character varies depending on the design of the letters. For example, the letter “i” in width is much smaller than the letter “m”. Times New Roman – proportional font. In monospaced fonts, each character occupies the same width. Narrower signs simply get more empty space around them to level the difference in width. Examples of monospaced fonts include such fonts as Courier New and Anonymous Pro.
Symbol (dingbat) fonts. These are fonts in which the letters are any icons. This group includes sets of special characters (mathematical, linguistic, phonetic, chemical, musical, chess, keyboard, etc.), borders, ornaments, vignettes, and other typesetting ornaments. The most popular symbol fonts are FontAwesome, Zapf Dingbats, Wingdings, and IcoMoon. Further I gathered the basic terms. The fact is that on the Internet there is a lot of information on terms and definitions. Unfortunately, they suffer from a lack of examples and some kind of competent explanation of what is described in the term. Therefore, here I have collected definitions that you need to know to correctly use fonts today.
Typeface. It is a set of fonts, united by common style features, different from other fonts. In other words, it is a set of units with the general character of the graphic construction of signs and the solution of their elements. Below you can see an example of a Mongolian Baiti typeface. It has various attributes, slopes, thin and thick lines. As a rule, when talking about a typeface, it means one font and all its possible styles.
Weight. Determined by changing the thickness of the main and connecting lines of the same signs. This means that within a single typeface, font weight can vary: super light (ultralight, extra light, thin), light, normal (book, regular, Roman), semibold (medium, demibold), bold (heavy), and super bold (extra bold, black, ultrabold). Look at the bright example below. Remember that good and rich typefaces have many variations of this parameter.
Contrast. One of the main font features expressed as the ratio of the thickness of connecting lines to the thickness of the main lines of characters. This feature varies from low-contrast to high-contrast fonts. The definition is a bit confusing, huh? The easiest way to understand it is to look at the example. Here you can see different fonts chosen for the same letter A. We see that the thickness of the main lines in some fonts is much larger than the connecting line that runs horizontally. The font can be non-contrast (monoweight), low contrast, contrast, and high contrast.
Point size (size, body size). It is a typographic unit of measure. The size of the font in the typeface or the size of the spot on which the sign is placed.
Tracking and kerning. These two concepts are more complex, but they allow you to set the tone of the presented information in the design. Tracking is an even or proportional spacing between letters. Kerning is a selective or different spacing between letters. Below you can see an example of tracking. Tracking and kerning can be both positive (the set becomes more rarefied) or negative (the set becomes denser). You can see that even though the lines are written in the same font, they give completely different perceptions. You may notice such examples of using great tracking on sites related to style, fashion, design, photography and other topics around art.
Linespace (leading). This is the vertical spacing between lines of text. Beginning designers often neglect linespace forgetting that it needs some settings at all.
Proportion. It is an indicator of the change in the width of the characters within the same typeface. As a rule, it is measured by the outer contours of the main strokes of the “H” sign. Changes in this relationship form extra condensed, condensed, normal, extended, and extra wide parameters. There may be other degrees of change in proportions.
Italic and oblique. Italic and oblique are often confused considering them the same but they are different styles. Oblique, as the name suggests, is a mechanically slanted typeface and does not differ in the structure of letters from regular writing. You yourself can create a similar style by clicking on the desired button in Photoshop, although sometimes the ready-made version is present inside the headset. Italic is also oblique but with its own unique set of characters, significantly different from regular writing in a more handwritten form of lowercase letters. The English name Italic indicates that for the first time such a font appeared in 1501 in Italy, at the printing house in Venice. He was cut by a Bologna engraver on the basis of the handwritten italics of the papal office and had no capital letters. As a rule, it is now used in conjunction with the regular font as a highlight.
For Whom and How Many?
Good typography is a pledge of easily accessible information, while in case of bad typography, you have to make an effort to understand the text. As Oliver Reichenstein notes in the article “Web design is 95% typography”, optimization of typography is the optimization of readability, accessibility, ease of use and the achievement of graphic balance in general. And now, let’s find out what parameters help to achieve all this.
Important text parameters:
Font size – it should be comfortable for the average user, not too small and not huge. The reader has no desire to increase or decrease the text in his browser.
Font style – must correspond to the theme of the site and clearly display each letter. No one will peer into intricate curls or words crushing each other.
Line spacing and letter spacing – there should be enough free space on the page. The text should literally to “breathe”.
Color – since the main task of the text is to be readable, no unpleasant or indistinguishable color combinations with the background are allowed.
For Whom?
First of all, you need to understand the purpose of your design. What message do you want to transfer? By what means? In a good design, typography fits the goal. For example, if you create a design that mainly relies on images, it is better to choose a font that fits the style of illustrations and does not distract all attention to itself. The font should be in harmony with the rest of the design. Just like it does Brainik Font in the example below. If images are the main element of your design, use simple fonts to emphasize the illustration.
In fact, some content is never intended to be read, but only to improve the design or for decoration. In this case, you can make a choice in favor of design over readability. A decorative font that is meant to be “heard”, not read can convey the idea of your design better than a serious font that is meant to be read, not “heard”. But it is important to remember that the fonts with the strangest or most beautiful design are far from the best in terms of reading and convenience.
Having decided on the purpose of design, determine the audience. It is extremely important, as the choice of fonts will depend on the age, interests and cultural background of the audience. Some fonts are more serious, others are more careless and playful, others are more decorative. Knowing your audience can narrow the font area to choose from. When you are planning a corporate identity and design, think about how you want potential customers to see your company.
Do you want your company to look classic, serious or traditional? Then you should choose an elegant serif font. Want to look stylish and minimalist? Then a sans serif font will suit you. Do you need something in between? Then you should combine several fonts. Simply put, the font that you choose says a lot to people about your company, so you should take it wisely.
How Many?
Using one font is usually quite boring. In this case, it is difficult to create an effective visual separation, only by changing the size and color of the font. For this, it is better to use different combinations of fonts. But how many fonts are you going to use? I would recommend using two or maximum three. When using more than three different fonts, your website loses its structure and looks unprofessional. Remember that abusing font size and style can ruin any project.
Sometimes, due to different styles and weight, it is possible to create the necessary variety even within one typeface.
If you decide to work with more than one font, make sure that the font families match each other in terms of the width of the letters. Here is how it looks in practice:
Decide on the main font you will use for headings. To do this, you can refer to the corporate identity of your brand.
Then you need to select an additional font that will be used for the main text. It should be easy to read, even on small screens.
And finally, your third font should attract attention. You can use it on the buttons of the target action or emphasize some parts of the text with it.
Consider that the text size should not be less than 13 points. The best choice is within 14–18 points. Not too big and at the same time readable. And if you do not have enough experience and knowledge, do not even try to use unusual, fancy fonts. Keep it simple.
Font Type and Color
The choice of type and color is a very important part of web design. It depends on how the site visitors will perceive the information, whether the site will be memorable.
Font Type
Let’s find out how different fonts affect consumer mood.
Straight elongated fonts. They convey business mood and are almost universal fonts. However, you should note that the direct font will be inappropriate for non-mass and original products which need to be visible among competitors.
Strict square fonts. Mainly used in the design of social advertising, advertising industrial products and technology. Lightness and simplicity are inappropriate here. These fonts are designed to set a person up to the seriousness of the information provided. They create an impression of importance and credibility. Therefore, they are designed to attract business partners and investors.
Rounded Fonts. They convey a feeling of comfort and coziness. While square fonts look harsh, rounded ones are positively perceived as a good brand attitude toward consumers.
Oblique fonts with vignettes. Most often used to advertise products for girls and women. Such fonts evoke a feeling of lightness and beauty. Beauty salons, clothing stores, and cosmetics often use them. They facilitate the perception of information, and it looks less important.
Handwritten fonts. Not suitable for outdoor advertising as well as oblique fonts – they are difficult to read if the large size of letters is chosen. At the same time, they are great for emphasizing the exclusivity of a product or service. Handwritten fonts are used to advertise lawyers and consulting services, medical practices, to write invitations, and to conduct political PR actions. They cause a feeling of trust and give greater reliability of the information.
Stylized decorative fonts. Fonts that look like graffiti or Gothic inscriptions should be used only where they will bear the corresponding semantic load. For example, it is completely inappropriate to use a gothic font to advertise a barbershop or children’s store. At the same time, it will look good on the sign of the themed bar.
Color
Color is a kind of “emotions generator” of site visitors. The coloristic design of the text conveys the accents of important information that can cause excitement or stimulate certain actions. This is a powerful factor in manipulating the user’s emotions.
It is best to choose a contrasting background color and text for ease of the text perception. In addition, try to avoid a large number of colors. However, do not neglect them at all to escape being boring. Oddly enough, but the best combination is white and black (dark gray). Bright shades can be difficult to read. Beware of combinations like red-green, blue-yellow, purple-orange. A marketing specialist Gregory Ciotti points out in his essay “The Psychology of Color in Marketing and Branding”,
“When it comes to picking the ‘right’ color, research has found that predicting consumer reaction to color appropriateness in relation to the product is far more important than the individual color itself. … It’s the feeling, mood, and image that your brand creates that play a role in persuasion. Be sure to recognize that colors only come into play when they can be used to match a brand’s desired personality (i.e., the use of white to communicate Apple’s love of clean, simple design).”
Those Evil Free Fonts
So, when you have already understood all the details of the fonts, it’s time to choose. And here you have doubts again. Expensive premium fonts are not affordable for everyone, especially when it comes to startups or beginning designers. And then the thought creeps into your head: what about a free font? My advice: push this thought away. Free fonts should be used when there is no understanding of why you need a font. But if you value your project and want it to become more expressive by choosing the right font, a free font is a bad idea. In addition, any free font regardless of quality risks to become wiped and recognizable very quickly. But most often you can find low-quality free fonts. And if your goal is to stand out (and every website has such a goal), by using free fonts it is very difficult to do.
Of course, I hope that after reading this guide you will understand how important the font is and the thought about a free font won’t come to your mind. On the other hand, I understand that when I see the cost of some fonts, I want to close my eyes and not look at them. Therefore, as a bonus, I will tell you in this guide where you can get excellent fonts for the price of a cup of coffee at Starbucks. Cheap and awesome! I found MasterBundles recently, and from that time I’m not even looking for other fonts. Here you can find a whole section of font compositions for ridiculous prices! And below you can look at top 5 font bundles of 2018.
With this bundle, you will get three original and widely varying font families for logos, websites, advertising, and even album covers! Usually, you would have to pay $30 for this awesome collection, but on MasterBundles you can get it for only $9!
Here you can see a modern collection of simple clean fonts. 10 creative fonts – less than $1 for a font! This set of fonts will make your design look stylish and visually attractive.
This rich bundle has contains 29 fonts, grouped in 5 extended font families. Nice, modern, bold, they can turn any type of text into an eye-candy piece of writing.
This modern bundle features 8 creative and grunge vintage font families in one mega collection. That’s a total of 18 unique custom fonts done up in a retro, vintage or grunge style.
It looks just like a deal of the year: 52 typefaces including 197 fonts + tons of graphics and logo templates for just $38 (the real value of this bundle is $1163), saving you 97%!
Conclusion
Finding the right fonts for your project can turn into a nightmare, but I believe that a little planning and forethought will help to avoid many troubles. The best font will always be the most suitable for a particular case. This means that a typeface that looks best and, let’s say, occupies not much space, will not necessarily be the right choice. Audience expectations and customer requirements should always be taken into account – a good start for many projects.
The main task of a typeface selection is to attract viewers. Objectives to be achieved through work must always be clearly defined and directed to the target audience. Do not forget about the age category and the interests of the readers.
Fonts cannot be bad or good, rather they are suitable and inappropriate. Don’t select any typeface until it becomes clear who will read the text and what you want to convey to the audience. Good luck and happy hunting for fonts!
Hi, I'm Jim. Most of all in my life I like to receive mails from designers, marketers and developers about how introduction to MasterBundles site has changed their lives.
Give a chance to your destiny - subscribe to our mailing list, add the blog to your bookmarks, buy bundles. Write to deals@masterbundles.com if you want to talk or publish your article. I embrace each of you.
The choice of type and color is a very important part of web design. It depends on how the site visitors will perceive the information, whether the site will be memorable.
Comments