8 Typography Tips for Designers: How to Make Fonts Speak
Have you ever gotten annoyed with a website because the typography was illegible? Maybe it was an indecipherable handwriting font; maybe the letters were so tightly packed that they formed a dense mass of text; maybe the font size was very tiny. Whatever the reason, you left, and they blew their chance to communicate with you. All their efforts of building the website went down the drain merely because of a few typography decisions.
Typography is not just about aesthetics but also about the readability of the text. For typography to be flawless, it needs to serve both these purposes. Let’s face it: typography can make or break your design. It is like a magic trick in the wand of a magician. The magician knows all the nuts and bolts involved in the trick, but the viewer just experiences fascination and enchantment.
No matter how experienced you are as a designer, it never hurts to recharge your mind with some helpful tips about typography. Here we list down 8 useful typography tips that will help you stand out in the marketplace:
Choosing the right font family
Most graphic designers have a few font families they lean into, and for good reason. While thousands of new fonts are released each year, only a handful will become widely recognized and credible. Broadly, fonts can be classified into five generic families: serif, sans serif, cursive, fantasy and monospace, with serif and sans-serif overwhelmingly fitting the purpose. Among the top-ranked Google fonts, there are four serifs and one sans-serif.
Because of the centuries long-life span of font families, and slow turnover at the top, making too bold of a choice is not indicated, and can backfire pretty badly. That might actually be why many designers err on the side of too much caution and do not take advantage of the choices offered to them at this level. Not only does font support the overall design and esthetic, but it is also key to making the text readable, approachable, and inviting.
Making a statement with font pairings
While designers ultimately have limited options for the fonts they use, they have an opportunity to bring distinction and personality by pairing fonts. Typically, designers use two or three different fonts to create a unique typographic design, usually from the same family. The key is achieving contrast without conflict. Pairings that are too similar create confusion and make the page hard to read. A more distinctive font works best with a more neutral or traditional typeface.
On the other hand, consider the context. A bolder typeface can be selected as an accent, allowing the website overall to remain more professional. Some common pairings are Roboto with Roboto condensed, and Playfair with Open Sans.
Applying the Basics of Typography to Your Website
Good typography is both a science and an art, with strict parameters for designers to work within to achieve distinction. App and web designers have quite a few choices to make to achieve their desired impact, so typeface should be finalized at the end of the design process.
A good rule to follow is to never sacrifice clarity or function for aesthetics. A font should bring attention to the ideas and concepts it embodies, not itself. On the other hand, too conservative an approach can make a brand appear too generic or bland, and fail to generate interest or drive action.
Ultimately, the design choices that create the biggest impression are going to be the most subtle. Equally important is uniformity, which creates an impression of reliability and trustworthiness. One of the biggest typography mistakes is a failure to achieve this consistency across the site and supporting content, which can be disorienting for the user and can discredit the idea or product.
UXPin is a product design platform that allows your team to easily design and collaborate on wireframes, prototypes, and mockups to validate any idea or concept quickly.
Leverage Hierarchy
In order to create an aesthetically pleasing design for users, the elements you put into it should also be well organized and easy to navigate. As a designer, you need to form a proper structure by constructing a visual hierarchy. Visual hierarchy is a vital element in any design project and cannot be forsaken because it balances form and functionality in a design. Plus, it gives readers a sense of how to actually read material from top to bottom with visual cues.
Visual hierarchy can be divided into different parts, one of which related only to the copy elements is called typographic hierarchy. Having been used by the newspaper industry for centuries, typographic hierarchy work towards organizing copy content by breaking it into various types such as headings, subheadings, body copy, captions and others. Regulation of sizes, width, family and colors of fonts is used to differentiate between the types of copy. Consequently, it makes text legible and scannable, thereby directing the user from the most important elements to least and drawing their attention where it is most needed.
Don’t Forget Context and Audience
Believe it or not, there are no good or bad fonts – only bad use of fonts.
The first impression users form of a product is usually influenced by the visual performance of the fonts. So, our font choices should hinge on where and how will your design be viewed. Fonts are like voices; they can usually be attributed to the person who is speaking. Take, for example, you use “Times New Roman” to design a woman’s bridal shower invite or use “Chiller” on a business card. Does that sound right? Obviously, not.
Make sure that the font you use aligns with the client’s preferences. The typeface you use can set the mood of the layout. There are serious, business, funny and several other fonts that suit a certain design. It is, therefore, extremely critical to be aware of the potential audience and the context of the brand you’re designing for so you can use typography more effectively.
Create Like a Scientist, Revamp Like an Artist
Do you think many designers act snobbishly when it comes to grids and kerning? Guess what, they actually implement standards backed by science.
Studies reveal that there are some ideal typographic standards – legibility, consistency and hierarchy – that not only encourage readers to read longer but also retain more information. For instance, sketching out your document so that it fits 65–75 characters on each line will make it easier on your eyes to leap from one line to the next. This allows people to read with no trouble. Plus, they often tend to read for longer periods of time because of this.
Nonetheless, as a designer, you should never bury your imagination and artistic soul. The ideal way is to maintain a balance between art and science and create a striking amalgam of the two to get unique results.
Let the Text Breathe
Design elements need some air to breathe. So, you need to separate large blocks of texts with empty spaces.
The legibility level of the text highly depends on how much space there is between letters, words, and text lines. You may adjust the white space between the typographic elements using tracking, kerning and leading.
Since it is difficult to distinguish words that are closely placed, a lack of white space may end up giving bad legibility of copy content. Likewise, overusing it might ruin text unity. When you give adequate room between letters, lines and paragraphs and utilize white space smartly, you provide the user visual relief and encourage a smooth transition from one word to another, and from one line to the next.
Draw Inspiration from Other Sources
Before you delve deeper into typography and its design process, it is highly suggested to find other works and study them. Seeking inspiration from other designers’ work is also likely to fuel your imagination. For instance, if you are to create a typographic logo for a professional logo design company, you may go through a diverse collection of typographic logos on Behance to derive interesting ideas.
Be on the lookout for why certain things work and why others don’t. From newsletter designs to art posters, to supermarket shelves, there is always something you can learn from them.
Developing an eye for the design is an indispensable ingredient in the making of a great designer since he knows more than just the technical stuff.
Less is More
One of the most important essentials to building a successful brand is maintaining consistency throughout the design. Utilizing too many fonts is like eating many candies at once and ending up with a stomachache. So, to avoid a confusing and messy look, implement one core typeface, preferably with varying weights and styles, to create a lasting identity.
For businesses wanting to steal the limelight in a sea of brands, consistent and memorable typography will work wonders.
Contrast is King
If you want to add a creative tinge to your text and want it to stand out, then contrast is your best friend. Contrast helps to give your text an attention-grabbing and meaningful appearance and effectively communicate the ideas you want to emphasize on.
You may make some variations in the elements as tweaking the size, color, weight, style and typeface of the designs enormously helps. Not only does it make a remarkable difference, it also helps you present your ideas in a more organized way.
Moreover, when it comes to choosing the perfect color contrast, you have to be extra careful. The brand identity and your target audience should be kept in mind. Adhere to the traditional monochrome or go for a full-color design – whatever you decide, ensure the color contrast doesn’t have a negative impact on the readability. It is also a good idea to match the color of your font with the background as it creates a cohesive look.
Special Attention to Mobile Typography
Designers tend to experiment with multiple designs to achieve the desired outcome. However, mobile typography poses a new challenge i.e. create a UI and UX web design that can work equally well on mobile phones.
Mobile screens, being small, restrict typographers. They entail deep attention to detail – from compelling kerning and tracking to appropriate size of fonts. Additionally, in contrast to web design, it is more difficult to achieve good legibility in mobile typography.
Therefore, all the elements you choose to integrate into this screen need to be both aesthetically appealing and fully functional. Take both the widths into consideration and set the alignment and spacing accordingly. As smartphone UI has some clickable text parts, you need to make sure the font size is big enough to be easily clicked with a finger, which, otherwise, can be very frustrating. Keeping that in mind, designers can bring value for users.
