In Baba’s book of advice to graphic designers about your website and its attractiveness to prospects, you’ll find a clear overview: The choice of fonts plays a major role in your website… even harder, you’ll need to find one that fits together. The fonts that have to be selected completely. Why ? To create a strong identity!
But, why does typography have such a huge impact? What is the real impact on your prospect, your customer, or simply this Internet user who finds himself on you from site to site? Is there any effect related to typography?
And if this effect is manifested coherently, how do you handle and choose typographical associations that are indicative of your field of activity and that of your company? Or who can support the message you want to convey? Let’s figure it out together!
Typeface Combination: A Strategic Design Choice
How is typographic association strategic for a company?
Typography is the art of assembling typefaces for marketing, aesthetic or artistic purposes, on a physical or virtual medium (books, magazines, websites). Combinations of these characters have several axes:
- Font: Which font is applied to the text? Is this Cambria? IBM Plex? Ariel? Are there different fonts depending on whether it is a body text, a secondary title, a main title?
- Types of characters: Is the text font lowercase? uppercase? Is your company title uppercase, lowercase? If so, what effect does it have on the Internet user?
- Punctuation: Have we integrated numbers or punctuation marks into our typography?
- Special Characters: Does the Typography Association allow the use of special characters or glyphs? Do they have any logical decorative meaning or aspect?
- Layout Rules: Are there any special rules for rendering text? Is this a classic or an original presentation?
All these questions point to the various elements that make up typography and all questions to think about beforehand to create your typographic identity.
What is the role of typography?
Typography is essential – and above all your communication! Color and shape define visual functions that refer to emotion. Why ? Because these feelings arise from a combination of elements that our brain interprets, specifically because of the social code transmitted to it during our childhood.
Let’s take the example of colors: we have come to realize that red symbolizes the forbidden. We have equated that blue color is tantamount to appeasement of the intellect. Typography conveys message too! An italic font would be associated with delicate writing, a handwritten font with a whimsical, even artistic field, while raw and sophisticated characters would be associated with high-end, cool and elegant brands. These are obviously classic social codes, accessible to everyone, but be careful, it is quite possible to be disruptive and “break the code”!
The choice of typeface can affect your message too: a big word corresponds to a cry, a call, an exclamation! (especially after the exclamation mark). Does your company intend to appeal to Internet users? To reassure them? to intrigue them?
Therefore typography is essential in the message to be conveyed, regardless of the readability of your message, its attractiveness and the efficiency with which it is conveyed. But, it should be channeled correctly than your company!
How to get a typographical association that is legible?
For a message to be effectively communicated, it must be clear, understandable and recognizable. We’ve established that typography serves to reinforce a visual message: the unity of style represents part of your graphic charter, your fingerprint, your visual identity. Be careful not to confuse the reader or internet user with a style that is too cluttered and mismatched, otherwise you won’t be able to create a real identity for your prospect. an advice ? You can break the code on any one of the typographic axes, but if you break all the codes, you run the risk of not being represented as a coherent identity in the mind of the Internet user.
Reinforcing a message also means using the potential of contrast allowed by typology. If we take the code commonly used on sites, we find that bolding allows you to support an important element of the message. In italics, in general, descriptions are provided, like virtual stage directions that allow a surplus of enlightening information.
It is also possible to play on styles between the title and the body of the text. While handwriting-type fonts can be singular and authentic, they also require effort to read and can tire the user. So be careful to focus originality on the headings and try to be more refined in your choice for the main text.
In fact, you have to convince the reader and captivate him with the text: so for the main text, no serif font!
What are the most classic typographical associations by industry?
Typography is science, and even MIT says so! Indeed, MIT (the famous Massachusetts Institute of Technology) used a neural network, on Google Street View, to understand the sociological trends of certain neighborhoods based on their typologies.
The first indisputable correlation is that serifs are associated, rather than assimilating, with readability, security, and confidence due to their classic character. It is not innovative, but it is safe and well known. Which industry in particular needs to reassure its customers about the merits of their operations? For example, companies in the financial and banking sector!
On the other hand, there are areas where innovation and originality are essential to attract customers looking for new products! For example, bars or nightclubs, as well as dormitory establishments, tend to benefit more with more decorative or handwritten fonts, which also recall a human and warm, original and authentic side.
Now that you understand the interest and complexity of a coherent typographic association, let’s take a look at the tools available on the web to help you find the right association for you!
The best tools for choosing your typography associations
Fortunately, there are tools to help you successfully combine fonts. Visit our pick of 10 free and easy-to-use tools for a successful typographic association!
1.canva
Yes, the famous graphic design tool also helps you choose the best font combination for your site.
Through its “Font Combination” utility, select the typeface of your choice, then instantly generate the most optimal combination.
2.fontjoy
In a clear and intuitive interface, Fontjoy generates different combinations of fonts to help you find inspiration.
Define the kind of contrast you want between your fonts and the tool takes care of finding you a creative and consistent cocktail.
The advantage with FontJoy is that you can paste personalized text to visualize the rendering of your content, in real time. If you like a font, just click on it to go to its Google Fonts page and download it.
3.fontpair
As the name suggests, FontPair helps you combine Google-approved fonts. A menu lets you choose the typeface pair of your choice (sans-serif/serif serif; display/sans-serif; display/serif; sans-serif/monospace; etc.) and see the best combinations.
Do you like a union? The tool gives you links to download the chosen fonts directly.
4. Type.io
To find the perfect font combination, take inspiration from other famous websites!
Typ.io uses data from about 3000 sites to associate customized fonts for each web design project. Simply browse through the different scenes to visualize the consistency of the assembled typography.
In addition, thanks to thematic filters research is facilitated.
A design catches your eye? Click “More Info” to receive the CSS code to add to your website.
5. Typespiration
Just like the previous tools, Typespiration allows you to browse a list of websites to discover amazing associations and colors.
Each visual sample displays the font and color combinations used, as well as HTML/CSS code that you can copy/paste directly into your website.
Useful for those who are just starting to design their website without a logo or graphic chart!
6. Adobe Font Pack
Adobe Font Packs provide a group of fonts designed by experts, providing a beautiful design. The combinations revolve around a number of themes that you can filter through. Its purpose is to help you find typefaces that match your field of activity.
7. Fonts in use
Website, magazine, business card, poster, product packaging… Whatever the medium, the fonts in use fuel your motivation to find attractive font pairings.
More than 8,000 models are offered on the site. It’s hard not to find inspiration in the face of this wealth of designs! It’s the perfect tool for creating an unusual web design that broadcasts your company’s personality.
8. Google Fonts
When you select a Google Fonts font, the site offers you a “Pairing” tab. You will get a list of typography that matches perfectly with your selection. Simple and efficient!
9. MixFont
Impress yourself with MixFont’s very detailed design. This generator mixes random combinations and gives you a preview of their rendering. There is no doubt that you will surely find your happiness among the almost infinite offerings of this tool!
10. Typothek
In a simple and intuitive interface, Typotheque lets you choose your fonts via the side menu. A text is displayed to help you visualize your combinations and compare your different tests. You can customize it with your own content, for an even more optimal look.
This tool is ideal if you already know how to select a list of possible fonts. This will allow you to test your choice, to validate the combination that best suits your needs.
Now you are equipped to choose the best combination of fonts for your design!
Our suggestion for your typographic affiliation
The font tools mentioned above allow you to freely choose your fonts and try out combinations and typographic associations. However, beyond equipment, one may need expert advice. In fact, it is not easy to define the bases of your graphic charter by defining the typographic association most appropriate for your company, and narrowing down the right choice even more!
Our freelancers are trained in the art of graphic design and based on your field of activity and your desire to stand out, help you define the best typographic association (and the most consistent!) to help you deliver your message. can assist. suited to your goal.
And if you’re done, but you’re having trouble integrating the fonts you choose into your website, you can also ask a freelancer at Codeur.com for help!