What font is used in articles. So which font is considered the most optimal? Practical Typographic Markup
Surely many people have had a situation where they had to identify an unknown font.
Will help you decide this problem quite simple and in an original way. You upload (from your computer or by specifying a link) a picture or logo that contains text, and the site provides a list of fonts. Files no larger than 360 x 275 pixels and the following formats are suitable for uploading: GIF, JPEG, TIFF, BMP. Sometimes you may need to enter the corresponding symbols shown in the picture, since the system itself is not always able to accurately identify them.
For better recognition system of individual characters, the developers recommend adhering to the following recommendations. It should be remembered that the smaller the font, the greater the likelihood of misidentification of the text. The optimal size for the system is the size of an individual character within 100 pixels (a larger size increases the search time for matches). Of course, due to the image width limitation, the image will contain only 3-4 characters, but this is quite enough to identify similar fonts. The service works successfully with color images, but high accuracy can only be achieved with black and white images.
After loading the image, the analyzer recognizes the characters.
If you still can’t determine the font, you can send the image to the forum, where they will always help you.
There is one drawback - there is no support for Cyrillic fonts.
There is another wonderful one online service on font recognition - (What Font is)
By uploading an image to this site, you can find out what font was used to write the text on it. The database has a sufficient number of Latin fonts, but there are not a lot of Cyrillic fonts yet. The site also offers free download of a number of fonts.
On the Whatfontis service there are 3 ways to find out what font it is:
Path 1
Load into the first window graphic image containing the inscription click Continue. A window will appear to recognize your picture and a field for entering a letter that the server was able to recognize. How more letters you specify, the higher the chance of finding your desired font.
When you finish at the very end of the page, there will be three search options:
- Display only free fonts or free alternative fonts
(Display only free fonts or alternative free ones) - Display only commercial fonts or commercial alternative fonts
(Display only paid fonts or commercial alternatives) - Display all fonts
(Show all fonts)
Path 2
You don’t have to upload your own image containing text with the desired font, but specify the web address of the image with the font.
Path 3
Search by name. You can enter the name of the font and search for its analogues.
Selecting fonts so that they fit perfectly together is not an easy task. Surprisingly, many web designers have a fairly vague understanding of how to select font pairs, which fonts are best to use for headings and subheadings, when to use italics, and so on. Meanwhile right choice A font can add personality to a website – and you don’t have to use exotic typefaces for this. Even the most common fonts correct selection can look very nice.
HOW MANY FONTS SHOULD BE USED IN A DESIGN?
There is no specific answer to this question - however, in most cases you can get by with one font. The main thing is that this font has several styles, at least Regular, Bold and italic. This is quite enough to create a text hierarchy. In addition, using one font saves the designer from the painful selection of a font pair. However, a single font makes the design somewhat boring, which is sometimes unacceptable.
There is an unwritten rule that you should use no more than three fonts in one design. Considering that usually a website or company logo is created using some kind of unusual font, the designer has only options at his disposal.
As a rule, in order to highlight headings, a font is used that is personalized (personality) and gives the text personality. The second font is used for regular text and it is very important that this font is readable. These fonts should be well combined with each other, since the slightest dissonance will worsen the perception of the content. Headings should be noticeable, but not flashy - after all, the purpose of the heading is to prepare the reader for viewing the next piece of text.
HOW TO CHOOSE A BASIC FONT
IN graphic design It often happens that you don’t need to choose a font at all - the company has a guideline in which everything is outlined, including the rules for using fonts. But for the web this option does not fit - often the only thing that can be taken from the guideline is the font in which the logo is typed.
When choosing a font for the main text, first of all you need to pay attention to its readability. It's best not to try to reinvent the wheel and use "tested" fonts that looked good in previous projects. Every designer always has several proven options in stock - these are the fonts that should be used first. If we talk about Google fonts, then optimal choice there will be Droid Sans, Noto Serif and Cabin.
HOW TO CHOOSE A FONT FOR HEADLINES
But this is where an ambush awaits many designers, especially beginners. Choosing a personality font is not so easy. If for the main text you can, without really straining, choose some kind of takhoma or verdana, then such a number will not work with the font for headings. A Personality font should be special, but not too flashy. It should attract attention, but only enough so that it does not interfere with reading. Each font has its own characteristics– speaking in simple language, some fonts are strict, others are smooth, others are sharp, etc. And if the personality font is chosen well and its appearance is harmoniously combined with the main font, then this means that the designer has fully coped with the task.
IN in this example combination of fonts used FiraSans And Merriweather.
OPTION 1: SAFE CHOICE
Many fonts are created in two versions - sans serif and serif. For example, Scala Sans and Scala Serif, Meta and Meta Serif, Droid Sans and Droid Serif fonts. These fonts can be used in pairs without any fear, since the shape of the letters in sans and serifs is almost identical, but at the same time they contrast quite well with each other. For those designers who are not entirely confident in their ability to select fonts correctly, it is best to use this method, as it is the safest.
Font combination DroidSans And DroidSerif
OPTION 2: PLAYING WITH CONTRAST
If a calm and easy-to-read font has been chosen as the main font, then headings sometimes require that they contrast with the regular text. The main thing here is not to go too far. Contrast is good, but it should not be too noticeable, as headlines that are too flashy will distract the reader's attention.
For example, the Noto Serif font has smooth letter outlines, it is light and easy to read. At the same time, it is very expressive and, if this word can be applied to the font, friendly. What font is best to pair with it? It is best to choose a sans-serif font with similar characteristics. That is, the personal font should have similar proportions, and its outlines should echo the outlines of the main font. Questa Sans will look very good paired with Noto Serif - it is quite expressive and modern and contrasts well with the serif font.
Font combination Noto Serif And Questa Sans
OPTION 3: INCREASE CONTRAST
If in the first two options the main emphasis was on the similar outline of the fonts, then in the third case you can enhance the contrast by choosing a font that has different proportions. Of course this is the most difficult option– in order to use this method, the designer must have good taste. Otherwise instead stylish design It will be complete nonsense. It is impossible to give any recommendations here, since everything is subjective and depends on many factors, including the focus of the site.
A combination of dissimilar fonts is best used in landing pages, business card websites, when creating banners, etc.
Cabin font is simple, catchy and readable. You can’t call it light, it’s all “square” and dynamic, but at the same time it’s perfect for typing basic text. It can be used in cases where you need to strengthen the presentation of information and attract the reader’s attention. For a contrasting font, you can choose a serif font such as Buenard. This font is more traditional, conservative and somewhat cold. At the same time, it looks great paired with the Cabin, highlighting its dynamism with its calmness.
Font combination Cabin And Buenard
CONCLUSION
In essence, there are no strict rules governing the choice of font. Basically, all the recommendations boil down to the fact that it is better to use harmonious and readable fonts in projects. It is better not to indulge in adventures and show restraint - in in this case it will only improve the design.
But in fact, it doesn’t matter at all what fonts will be used - the main thing is final result. Sometimes it's even better when a designer takes risks and experiments with a combination of different fonts - sometimes such experiments lead to surprising discoveries.
Is - text component, i.e. the user needs to read, read and read again. According to statistics on the Internet, almost no one reads an entire article; everyone skims and tries to catch only the main idea, since articles, as a rule, are full of “water”. The webmaster’s goal is to make reading as comfortable as possible for the user. This article will tell you not only about choosing a font, but also about how best to lay out content on the site.
What are the criteria for choosing a font for a website? Below I have listed the main criteria and recommendations for each of them.
1. Selecting a font family
There are countless fonts, many of them similar to each other, but nevertheless, each of them has its own distinctive features. However, not all browsers have each of them. Below is a small list of the most popular fonts that are available in every browser:
- Arial ;
- Verdana;
- Times New Roman;
- Georgia ;
- Trebuchet MS;
If you are satisfied with any font from this list, then it will be the best option, because then you don’t have to worry about loading it specially into the user’s browser. If you still want some rare font, then you can go in several ways (but I immediately say that it is better not to create problems for yourself!).
For example, you can choose some beautiful font on Google Font, but in order for the selected font to appear in the browser, users will need to connect it. As a result, the font will be loaded from Google Font every time, which, in my opinion, is bad and there are a number of good reasons for this:
Firstly, there is a dependence on other sites (in this case, Google). For example, Google may work slowly for some reason, and in this case your site will also slow down. You don't have to look far for examples. I personally loaded a script for working with the AJAX library (jquery) from the Google website, but periodically it did not load at all and this led to incorrect operation the entire site.
The solution to the problem was simple: I simply copied the entire .js file to my hosting and uploaded it from my website. It is best when the entire site is loaded from your own hosting. However, you won’t be able to transfer the fonts to your website; you will always have to download them from the Google website.
Secondly, in browsers such as Opera, in the eyes of the user everything will look like this: he comes to your site, the content has already appeared and after about half a second - bam and the font has changed. This will happen as soon as the browser downloads it from Google and processes it. For serious resources, this “flickering” of text styles is unacceptable. Of course, this situation does not exist on all browsers, but personally, even one opera is enough for me to give up the idea of using less popular fonts.
Let's return to font families. The best and most versatile font is Verdana. This site has just such a font. It has no squiggles, is strict and readable, which is exactly what the user needs to quickly obtain information.
2. Selecting the font size
Choosing the font size is a difficult task as some people like it more small font, and to whom a larger one. Personally, I chose a size of 14 pixels for myself. This size is a standard in many areas (for example, this size is used when writing diplomas and coursework according to GOST). On this site, there is no need to make the font size 14 or more, and there is no need to make it smaller either. Remember that the most important thing is that users have a comfortable reading experience.
NoteOften the same size for different fonts has completely different sizes in height, and therefore visually reproduced differently. Therefore, it is better to test how everything looks, and not bother with a specific number 14.
3. Selecting the font color and background for it
No matter how good the color and background are, it is still inconvenient to read text on the monitor. All that can be done is to make reading as comfortable as possible. It is believed that black text on a white background is very readable, but if you ask the opinion of people who work on computers, they will say that White background very bright and it makes your eyes tired. The ideal solution is a slightly grayish background with black and gray text on it. You can read such a text for a very long time without straining your eyes. Blue font color is also good for the eyes.
The combination of black background and white text is also very popular, but this combination is not suitable for every site. Still, most sites have light designs. I found special list combinations of font and background colors (in descending order of readability):
- Blue on white;
Example - Blue on White - Black on yellow;
Example - Black on Yellow - Green on white;
Example - Green on White - Black on white;
Example - Black on White - Red on yellow;
Example - Red on Yellow - Red on white;
Example - Red on White - Green on red;
Example - Green on Red - Orange on black;
Example - Orange on Black - Black on purple;
Example - Black on Magenta - Orange on white;
Example - Orange on White - Red on green;
Example - Red on Green
4. Other little things
Among these little things I would like to include the following:
- The text must be formatted in lowercase, because... a large register causes irritation;
- The font alignment should be left-aligned because that's what everyone is used to;
- The content should not be very stretched in width, since users are lazy and if their eyes have to run from the left to the right edge of the monitor, this will cause discomfort and loss of thought;
- The font must be normal, i.e. not italic, not bold, not underlined (save these elements to highlight the main ideas in the text);
Finally, I want to say once again that the choice of font and its design is as important an element as the choice of design for the site. Don't commit typical mistakes webmasters who decided to stand out and because of this they lose a large number of users for whom sites are created.
ABOUT basic principles working with typography.
To bookmarks
One of the most important skills for a designer is the ability to choose typography, writes Jonathan. After all, text is one of the main ways a designer communicates with users. And typography can make or break a design.
Typography is both complex and beautiful. Some people dedicate their entire career to it. Luckily, their work is well documented, so we have plenty of typography resources online.
This material is designed to develop initial skills in choosing typography for your design, as well as encourage experimentation with fonts and their combinations - including unknown ones.
Define your goal
First of all, you need to understand what the purpose of your design is. What information do you want to convey? With using what? IN good design the typography is fit for purpose. This is because typography is a key factor in creating the mood, tone, and style of a design.
For example, if you're creating a welcome card design that relies heavily on images, it's best to choose a font that matches the style of the illustrations. The font should be in harmony with the rest of the design.
Choose a font that matches the style of your illustrations
If you are creating a landing page design in which images play a large role, choose a font that will not distract from the illustrations. The font in this case acts as a way to emphasize meaningful information, carrying a key meaning.
If the images are main element your design, take it simple fonts to highlight the illustration
Define your audience
Once you understand the purpose of the design, decide on the audience. This step is extremely important because the choice of fonts will depend on the age, interests and cultural background of the audience.
For example, some fonts are better suited for children. Since they are just learning to read, easy-to-read fonts with large, legible letters are best for them. Good example This font is Sassoon Primary. It was created by Rosemary Sassoon based on her own research into which letters are easiest for children to read.
Sassoon Primary
Other fonts are better suited for older children. In such fonts, the letters are of the appropriate size, the colors are contrasting, and there is no handwritten style or decorative styles.
When choosing typography, consider your audience and their needs. Simply put, put yourself in the users' shoes.
Look for inspiration
Pay attention to the work of other designers. Try to understand how they decided on the look of their typography.
Font Ideas
If you're not sure which font to choose, CreativeBloq's The 100 Best Free Fonts can quickly get you in the mood. In it, the author explains the motivation behind the design of each of the hundred fonts presented.
Another useful source of ideas is the 100 Greatest Free Fonts Collection for 2015 from Awwwards. In addition, Invision recently published a huge list of typography resources. There are plenty of sources of ideas there.
To see what ideas look like on real websites, check out Typ.io. It contains examples of fonts from all over the Internet. In addition, at the bottom of each font sample there is its description in CSS.
In addition to these “inspiration” services, check out your favorite sites and see what fonts they use. WhatTheFont is a good tool for this. WhatTheFont is a Chrome extension that lets you explore fonts on the web by dragging your mouse over them.
Ideas for combinations
In addition to just fonts, look for ideas for their combinations. The right combinations are no less important than the fonts themselves. Thanks to the right combination of fonts, a visual hierarchy of information is created and the readability of the design is improved.
For pairing inspiration, start with Typewolf. It contains examples of font combinations from different sites. In addition, the site has recommendations and articles with an in-depth analysis of typography. A real treasure trove of information.
Choose your fonts
Inspired and armed with research, you're finally ready to choose your typography. When it comes to this, keep the following principles in mind: interesting appearance, legibility and meaning.
Before choosing a font, find out why it was created
Choose a font that fits the purpose by conventional standards and is easy to read. Avoid overly fancy fonts in favor of simple and practical ones. Also keep in mind why you need the font. For example, some fonts are better suited for headings, while others are better suited for body text.
A combination of two fonts that contrast with each other
When it comes to font combinations, limit yourself to a maximum of three. Also, arrange them so that they contrast. In this way, it will be possible to control the movement of the reader’s gaze: first the headline, then the main text. You can also create visual contrast by using different font sizes, colors, and weights.
For web fonts, Google Fonts, Typekit, and Font Squirrel are good options. Google Fonts is free, and Typekit and Font Squirrel have both free and paid fonts.
Determine font sizes
Once you've figured out font combinations, move on to their sizes. Modular Scale from Tim Brown, head of typography at Adobe, is great for this. In fact, Modular Scale is a system for identifying historically ideal font size ratios.
For example, you can use a ratio scale based on the golden ratio. These will be the first five font sizes:
Golden ratio (1:1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089
Your ratio may be too high. For example, here's what the last intervals look like on our scale based on the golden ratio:
Golden ratio (1:1.618)
11.089 x 1.618 = 17.942
17.942 x 1.618 = 29.03
29.030 x 1.618 = 46.971
46.971 x 1.618 = 75.999
75.999 x 1.618 = 122.966
As you can see, the intervals between the numbers are becoming too large. For most interfaces, such intervals are not suitable - less is needed. Fortunately, in
Hello, friends! Today we will talk about how to choose fonts for a logo.
Most designers would agree that choosing a font is one of the most important things when designing a . Nowadays there are thousands of fonts available and it is difficult to choose the right one. But there are ways to simplify the selection process. For example, once you understand that fonts have personality and what exactly that is, you can choose a font that conveys necessary qualities your business.
What fonts do famous companies use?
Let's look at logo fonts well-known companies and let’s try to find out how they work, what associations they evoke, how they are integrated into the company’s brand. 
Candy manufacturer Pez uses a font that is a visual representation of a type of candy. The font is playful but simple, just like a toy candy dispenser.
A handwritten font with curlicues like those of Coca-Cola and Disney is associated with something free and friendly, making the logo a little magical. 
Banking giant HSBC uses a classic serif, all-caps font that represents a strong, dependable personality.
At the same time, Citigroup opts for a lowercase sans-serif font instead, projecting an image that suggests accessibility above all else.
The For Dummies series of books uses a very informal font that contains different font sizes in order to create something that doesn't look intimidating. The message here is that any topic can be accessed.
As you can see, a logo font can say a lot about your business. Next we will talk about what categories of fonts there are.
Font categories
All basic fonts can be divided into several types: Serif (serif), Sans serif (sans serif), handwritten, Script, typewritten fonts, fonts with curlicues Display.
Serif fonts are the most traditional. These fonts have lines (dashes) at the end of each stroke and look professional and classic. For example, Times New Roman is one of the most commonly used Serif fonts.
Sans serif fonts look cleaner and more modern because they don't have lines at the end of the strokes.
Handwritten fonts resemble text written by hand with a pen, brush, etc.
Handwritten fonts look warmer and more attractive, but they are difficult to read, so they are used only as capital letters in the printing house.
Script Fonts very refined and suggest luxury. Like handwritten fonts, they have characteristic features.
Fonts Display, as a rule, are a fallback for logos because they are not so unique.
Typescript fonts imitate text typed on a typewriter.
Such fonts combine well with fonts of other groups, unlike decorative fonts.
Once you know roughly what associations and feelings you want your logo to evoke, you can begin searching within a specific font category to find the perfect logo font.
Before you start looking at fonts, take a good look at your company, site or project. Ask yourself a few questions:
— What is the image of my company?
— What qualities do clients value?
— What would you like to emphasize - reliability, creativity, stability?
— If you could choose three words to describe your brand, what would they be?
— Who is your ideal client?
This is important because every font has its own mood and personality. It can be serious, casual, playful or sophisticated. You need to determine what exactly you want to convey with the font and whether it suits your design.
If the qualities that a typeface conveys don't match the message of your overall design, it will create visual dissonance for the viewers or users of your design, and you don't want that. It is important to pay attention to the psychology of the font. After all, font, like color, has psychological impact on human perception.
Choose a font without personal preference
Another important point. When browsing fonts, it can be easy to get caught up in all the fun and interesting options, but don't let personal preference get in the way; a font that you think is distinctive or stylish may not be useful or appropriate for the project you're working on.
Consider the spirit and characteristics of your business
You should first think about your brand description because no two brands can have the same image. Corporate law firm will not choose the same font as a cosmetics company that sells products to twenty-year-old girls. Getting the first step right will make the rest of the logo design process much easier.
Remember, the font that most perfectly encapsulates your brand image will have a huge impact on your customers' minds and can become iconic if done correctly.
Don't copy your competitors
You probably always want to be aware of what your competitors are doing. Not because you want to copy their style or steal something, but because you want to know what they do so you can learn from their mistakes, see what they did right, and avoid unintentional similarities. By at least, it will be the right thing to do. Therefore, you should definitely not use the same fonts as your competitors.
Be original
You want to do your best to be original while still staying true to your brand message. Good idea- buy a font for your logo from a font store website, rather than choosing one of the fonts that is installed with your word processing program or is available in public access. These fonts were used too often for other companies.
Choose simple fonts
Readability is very important when it comes to your logo. If potential clients don’t have the slightest idea about the name of your business, then what kind of business can we talk about with you? The logo must be readable, even if the logo is the size of a postage stamp.
How the chosen font will look in different environments
If a few decades ago fonts were used only in print environment, but now the situation has changed dramatically. Website, your smartphone display, smart watch, various gadgets, 3D objects - all this can be a medium where your logo is used.
So once you've narrowed down your font choices, you should check how they will look when printed - large, small, stamp-sized, etc. What will the printed letterhead look like? How will it look on the back of a van? Fifty feet tall and plastered on the side of a building? How it will look on a website, on a smartphone display, etc.
Fonts will vary depending on size, whether they are printed on paper or used on the web. Some fonts may become illegible or unattractive.
Avoid popular fonts
There are so many font sites on the Internet now that there are no excuses not to explore them. Most of them allow you to preview each font, see how it will look with your company name, etc. It is worth remembering that the font you like may have been used before you or will still be used. So try to avoid very popular fonts for your design - Roboto, Lobster, Ubuntu, etc.
And remember, it's okay to buy a font or other quality product online :)
Be timeless
Remember those disco fonts from the late 70s that looked like balloon animals? They were all in fashion for a few years and then disappeared. Remember that your logo needs to withstand design quirks, and that includes your font.
If everyone around you is suddenly using a certain font style (like the ubiquitous Sketch Block), try something different. After all, you want your logo to stand out, and although choosing a trendy font seems simple solution, you'll regret it in a year.
No frills
There is a saying in the tattoo community: if you are brave, you will endure. This can be applied to fonts as well. Delicate, fragile, floral lettering is usually too thin to reproduce at smaller sizes and will most likely not be readable. So choose a simple, prominent font.
Give me some space
The great jazz trumpet player Miles Davis once said that the notes you don't play are just as important as the notes you do play. So when choosing a font, keep in mind the space between characters (kerning). Too much space can make a logo appear light and airy, while too little kerning can make a logo appear cramped and awkward.
Combination of several fonts
You'll notice that most big brands stick to one font. This sends one strong message to the consumer. At the same time, many companies use additional fonts in their logo.
If you want to use multiple fonts in a logo or as part of an ad, you need to make sure that the fonts complement each other or harmonize well, as very different fonts will not look good together.
Use infographics to correctly combine logo fonts.
You can also use the service Typegenius to choose the main font for your project, and then see all possible successful combinations with it
Font selection site
There are many sites (of varying quality) that offer free fonts to download. The first thing you need to remember when downloading fonts is checking the license.
When you buy a font, or even download a free one, you can't always do whatever you want with it. Usually he has a license for personal, commercial or educational use.
Some fonts have limits on the number of times they can be used in print or online, or restrictions on distribution to other parties. You should read the license to protect yourself or the client for whom you are creating a logo.
Below is a list of sites where you can find the font you need for your logo:
This site presents to your attention an impressive collection of fonts with convenient sorting by category, filter and search ability. The most popular Russian-language fonts are handwritten, gothic and decorative, as well as graffiti. Any font is available for download.
One of the richest collections of free fonts. You will certainly find a suitable option among the 20 thousand items presented on the site.
Don't let the name fool you, this site has not 1001, but over 10 thousand different fonts. To download all of them at once, you will have to pay a small amount, but if from all this variety you only need individual options, then one by one they are downloaded completely free of charge.
An extensive collection of a wide variety of fonts from Google. All of them are free and can be downloaded to your computer for use in various applications or connect to your website.
Russian-language web resource, which is a large library of free high-quality fonts for use in Adobe Photoshop or on the website.
A site dedicated to the creation of logos and typography in general. In addition to interesting and useful recommendations, you will also find many beautiful and high-quality fonts here.
More sites with fonts can be found in ours.
As you can see, choosing a font for a logo is not so difficult. Write in the comments what tips/services you would add.
How to choose correct font for logo: complete guide updated: February 17, 2018 by: admin