Stand Out Letters: Choosing The Right Typography That Would Attract Customers
Although often overlooked, your website’s typography can make or break how people perceive your business. When done properly, it can strengthen the appeal of your brand, improve the readability of your website, and provide a smooth user experience to site visitors.
But when done the wrong way, it can make your business look bad and turn off potential customers. And as we all know, creating a website or an industry blog that engages customers is one of the best marketing strategies entrepreneurs can include in their business plans.
Typography has, in fact, become integral in businesses that popular brands like Nokia, Airbnb, and BMW have invested in creating their own font designs. Just this January, beverage giant Coca-Cola launched their brand font called TCCC Unity designed by Neville Brody. It encapsulates their 130-year old history and reflects who they are as a brand. The said font is optimized for both print and web.
Your Brain and the Typeface
Ever wondered why we associate certain fonts to certain thoughts and emotions?
A look into the Gestalt Theory reveals that the human mind tends to view parts of something as a single unit in an attempt to simplify the visual process. This means that in designing anything, you must ensure that all the elements are unified—and that includes the font.
For instance, in logo design, using a font that reflects the business and what it stands for is crucial in facilitating brand recognition and recall among the brand’s target market. But it’s not only in a business’ logo wherein typography is crucial. Choosing the right font face for your website is important as well.
Each font style has its own characteristics, allowing it to convey different meanings to people. Depending on the nature of the business or the brand image you want to project, you can either pick a typeface that expresses creativity, power, fun, elegance, and many more.
On a practical note, the right typography can make reading the content on the website easier, therefore encouraging visitors to consume more of it. This can also encourage them to come back. For e-commerce sites, this provides an opportunity to turn one-time buyers into regular customers.
Font’s Influence on Customer Behavior
According to MDG Advertising’s infographic, good typography puts readers in a more positive mood and gives them a sense of being in control. This keeps their level of engagement high and encourages them to keep reading.
In the same infographic, the advertising agency illustrated Norman Nielsen’s recommendations on what makes for a good font. In a nutshell, they recommend a larger font size for better readability.
Simpler backgrounds are also recommended for the text to stand out. Norman Nielsen also suggests adequate spacing between characters, words, and lines, and to refrain from using novelty fonts, especially gothic and handwriting-style ones.
For instance, customers find Sans Serif and Serif fonts equally easy to read. However, they associate the former to being “casual and modern”, while they relate the latter to being “traditional and established”.
Picking the Right “Type” for Your Site
Selecting your site’s typeface involves more than choosing one that you find is most visually appealing.
For one, you have to consider your brand voice, the available font styles, readability, mobile-readiness, and many more. To guide you through the selection process, we have outlined the things you need to take note of below:
1. Choose a font that matches your brand
Think of your business’ nature. A more serious line of business requires classic and streamlined fonts. Take Entrepreneur.com’s wordmark for example:
A fun or creative business, on the other hand, gives you more freedom to experiment with stylized designs. A good example would be Baskin-Robbins’ logo typography.
Consider your target audience. As with any marketing campaign, who your target market is and how you communicate your brand to them is crucial. Make sure that the font you choose will resonate and be received well by them.
Think of which platform will be used to view the design. For the web, Brad Shaw, President and CEO of Dallas Web Design, shares that they like using Google Fonts. According to him, aside from having a large selection to choose from, most Google Fonts are easy to install and use on a website. “They load faster, are SEO friendly, and look the same across different computers,” he explains.
Legibility is also important. Chad Birenbaum, Co-Founder & Designer of Duckpin Design, suggests the use of classic fonts for the web for this reason. “I think display type should only be used in larger headlines, or branded treatment, but for body copy and smaller headlines, something classic and legible is always crucial,” he maintains.
2. Know what the main fonts are
To make choosing the right typography for a site easier, brush up on your knowledge of what the main typefaces are.
Currently, there are five main font design categories: Serif, Sans Serif, Display, Modern, and Script.
Source: Amazon news
Source: Creative Bloq
These fonts have what are referred to as “feet”, which are lines located at the edges. This characteristic makes the serif fonts very legible due to the visual illusion it creates of seemingly connecting one letter to the other. Serif fonts are widely used in materials containing long texts like blogs and newspapers.
One popular brand that used Serif for their wordmark is Canon, which has been using this typography since the 1930s.
Source: Creative Bloq
Due to not having “feet”, Sans Serif fonts have a cleaner appearance compared to Serif. They’re pretty easy to read, regardless of what size they are in. The Sans Serif font is ideal for short descriptions, headlines, and captions.
As part of its rebranding efforts in the late 2015, Google switched from its original Serif wordmark to one that is in Sans Serif.
These types of fonts are their own unique kind. Each design is specialized, so they are perfect for establishing brand identity. If you want to grab the attention of your audience, these are also great fonts to use.
A brand that used a unique display font for their logo is Twitter. The social platform used the Pico Alphabet font—a typeface with rounded corners that gives off a fun yet futuristic vibe.
Font designs under this category are extremely thin or extremely bold, and have a very clean appearance. If you want your website to have a more trendy and contemporary appeal, modern fonts are your best bet. You can see this typeface being used by global retail brand, Marks and Spencer.
Fonts under this category have a lot of curvy lines often resembling one’s handwriting, making it appear romantic and personalized. Ideal uses for this type of fonts are big headlines and logos.
Established healthcare brand Johnson & Johnson has been using this kind of typeface (which is fashioned after its founder’s signature) for their wordmark for around 130 years now.
Symbols and Dingbats
These are not included in the five main categories, but they are still worth discussing. While they are not often used for logos, they contain elements that can help in creating unique and interesting typography for your website. As their names imply, these collections are made up of symbols you can use to get your point across.
With the many types of fonts you can choose from, the sky’s the limit when it comes to selecting the best typography for your site.
3. Create and Curate: Typography that is Uniquely Your Brand’s
Now that you know the type of fonts styles to choose from, you can proceed to create the typography that’s catered specifically to your client’s brand. While it is imperative that you follow their guidelines, you must also exercise your creativity as well. This is so you can come up with a typography for your site that is original and memorable.
To aid you in the process, here are some rules you must take note of for thoughtfully-created typography:
Familiarize yourself with the basics
One of the things you must learn is the anatomy of a typeface. You have to be aware of the exact measurements and standards of a font design. Only upon getting a full grasp of these concepts will you be able to get creative with your design, while still be able to make the most out of its function.
If you want to learn about typography in greater depth, there are also a lot of resources on the web and in print form that you can look into. Just make sure the said source is reliable, updated, and comes from an authoritative source.
Be mindful of the space in between
The space between the text (tracking), letters (kerning), and lines (leading) matter as much to a text’s readability as the font you’re going to use. In essence, what you have to do is make sure there is enough white space between the typographic elements to make your text easier to read.
When used properly, adequate white space within a piece of content can put your reader’s eyes at ease. This is because it will become easier to separate one word or line from the one next to it.
Typically, left aligned text are easier to read, as it provides a stopping point for the eyes to rest before moving on to the next line. This is also how our eyes were typically trained to read, since the text in books and other reading materials are left aligned.
When designing, you can choose whichever font alignment you prefer as long as you keep it consistent all throughout the page. Refrain from aligning center as this makes the content more difficult to read.
4. Take the safe route
For the web, simple fonts are always the best choice. Web content often involves big chunks of text, and you’ll want to make them as easy to read as possible.
Sans serif fonts are always the best option for web use as they are legible on screen. Some of the Sans serif fonts that you can look into are Verdana, Arial, Trebuchet, Lucida Sans, and Arial.
If you want to use creative fonts, you can save them to make the headlines of your web copy pop. For better readability, make sure that the headlines still observe proper letter case usage. Also, see to it that the size of the font you use looks good both on a computer screen and a mobile browser.
However, safe doesn’t have to be boring.
If you’re looking to break away from the classic fonts mentioned above, there are other fonts that are optimized for readability on the web. You can choose from those instead. These are popular among web designers due to being simple yet impactful.
5. Use font stress to your advantage
Font stress is the horizontal or vertical shift in a type like tilts, arches, and irregular strokes. Alternatively, it can also mean the mood created by the font.
Not all fonts come with stress points; there are some types where the stress point is discrete but present. You’ll also notice that stress points are more present in certain font styles than others.
Stress can be created intentionally or by design using extreme manipulation of the leading, kerning, and/or rotation of the font. In kerning, stress is achieved when you radically adjust the letter to the left or right.
In typography standards, letters should not appear too disjointed nor too close together when kerning so as not to affect the text’s legibility. It’s also ideal that big fonts are kerned tighter together.
Balanced leading, on the other hand, means staying between 100 to 140 percent of the font’s size. If you go under or beyond that, the text will be considered stressed.
Just as one would view other font modifications like stretching, flipping, or rotating, stress is viewed as distortion by some typographers. However, as a designer, you can use this technique as an option to improve the appearance of your projects as you deem fit.
6. Observe font contrast
Since typography for the web is all about readability, it is important that you maximize the use of contrast. Combining contrasting elements like dark text on a light background work best for presenting long-form writing, because it makes it easier for the reader to grasp the text on the page.
But color should not be the only thing to consider when creating contrast. Pay attention to the choice of fonts as well. Choose primary and secondary fonts that are in visible contrast with each other.
For example, if you use a creative font for your headers, use a simpler font for the body of your content. This should create that illusion of separation, providing a better reading experience to the visitors of your site.
Luxury brand Jimmy Choo has been successfully doing that with its choice of website fonts. Senior Type Designer Stuart de Rozario of authority site FontSmith.com has this to say, “The contrasting narrow and wide nature of the bespoke University Roman JIMMY CHOO word mark allows the main typeface Proxima Nova to flourish, forming a dynamic visual relationship.”
However, do remember that even though the fonts you’ll be choosing are contrasting, it is essential that these two look good together. Typically, two fonts work together well when they were created in the same era, have almost the same stroke weight or x-height, or are made by the same typographer.
7. Consider mobile typography
Most people access the web via their smartphones nowadays. This is why it is crucial that you factor in mobile typography when creating your design. Smartphone screens are smaller than desktop screens, so you need to consider that to not lose the functionality of your design.
It goes without saying that mobile typography comes with a slightly different and more specialized set of guidelines than that of web typography. The level of contrast should be well-thought of as well. When it’s too much, it can hurt the eyes of the one reading your page from a smartphone device.
Likewise, the buttons and links should be clickable even when viewed via smartphone. There’s nothing more off-putting than links that won’t function. Former WordPress implementer and agency manager Suzanne Scacca has a few more tips for optimizing typography for mobile websites:
- Use system default or traditional fonts like sans serif or serif. If you must use stylized fonts, use it sparingly.
- Stick to two font faces to avoid visual overwhelm.
- While it is important for the primary and secondary font to be in contrast with each other, it is also important that these fonts have something that ties them together, particularly in character width.
- Refrain from using font designs wherein certain characters appear similar to each other to prevent slowdowns when reading on mobile.
- Make sure the letters “r” and “n” have adequate space between them when viewed on mobile.
- When in doubt, pick from the following fonts: Times New Roman, Georgia, Arial, Trebuchet MS, Tahoma, Verdana, and Courier New. These fonts are recognized by a wide range of mobile devices. Jordan Moore also came up with this list of the system fonts installed in mobile operating systems of the present.
- Stick to practical and safe choices for better user experience.
Figuring out the most suitable typography for your site can be tedious. And with more and more people using their smartphones for web browsing, today’s best practices continue to evolve. Hopefully, this article has equipped you with the knowledge necessary for you to effectively attract customers through the typography of the websites you create.
Have your own set of website typography rules that you live by? Share them in the comments section below!
Aaron Chichioco is a digital PR / business columnist. He has a vast experience in overseeing daily operations of several online businesses since 2011. He is currently employed with grit.ph. You can follow Aaron on twitter at @Aaron_Chichioco