Hamza Mahmood

Follow

Jul 22, 2018 · 7 min read

Online Businesses

If the business is online, text would be considered as the most basic yet highly effective way to reach their target audience.

Designers

For designers, typography has real potential to make or break a business. This is a particular area of interest for UI/UX design studios— to build brand identity organically, establish effective communication and streamline content delivery on different platforms through well-thought out typefaces.

As implied, text is a medium used to inform, discuss, emphasize and encourage new visitors to interact and communicate with the company. However, the way they present themselves through their content creates a long-lasting first impression among users, which could be their last.

But where does the term typography, fit into this whole dynamic?

Typography is basically how text is presented, in the most literal sense. With each letter stylized in a peculiar way, the design pattern remains the same across the rest of the letters.

Typography is represented by a typeface or more popularly as a ‘font-family’ showcased through titles, headings and paragraphs across a web-page. If the company is professional consulting service, a healthcare provider or an educational platform — the choice and style of words can make a big difference.

This write up aims at informing businesses and startups about how typography is a game changer when it comes to first or last impression.

Note: All images included in this piece are my own design. They serve the purpose of explaining a particular concept in each section.

1.0 Minimize The Number of Font-Families Being Used

Never aimlessly add fonts just because they look nice or if its adding some flavor to your web app. It is better to keep the number of font-families at a minimum; such as 2 or max 3. Going beyond 3 will make your web app seem busy and disorganized, almost to the point that it looks amateurish.

2.0 What Audience Are You Trying To Reach?

When choosing a set of typefaces for a web app, companies need to carry out research on their audiences. This would ideally involve specifying the following:

• Age bracket
• Demographic
• Cultural Affiliation
• Ethnicity
• Gender

Looking into each factor allows companies to identify the exact pain-points faced by users and consequently formulate their goal and objectives based on the researched user persona.

Assuming a scenario, you are to design an educational app or a game targeting children between 4–12, chances are you will be using a font which is playful, glittery or maybe has decoration around letters.

Fig 2a shows one example of a font-family and includes colors on the even numbered letter. The point is to excite children on looking at the sentence and games utilize this technique to make playful learning experiences.

However, when designing an online mobile-based app for a maturer crowd that may also include senior folk, the font needs to be legible, bold and of relative bigger size as seen in fig 2b.

Terminologies

In Design Thinking terminologies, to design an app which is wholly customer-centric, a very fundamental practice is to empathize with the users themselves, by listening to them and mapping out a complete flow from point A to B when addressing the problem.

If businesses open themselves to the customer’s sentiments and woes, they can make the ‘right’ additions or modifications to their existing line of products. Showing empathy tells customers that you care which goes a long way to building brand loyalty.

3.0 Complement Your Selected Font-families, Smartly

Lets say your business is a news group or blog channel that prioritizes content over other elements, your designers should choose font-families that favors easy readability.

By rule of thumb: text should be non-intrusive for the reader and should flow smoothly; hence, we do not want the selected fonts to be seen in juxtaposition to each other. Instead, complementing font-families goes towards improving the reading experience of users.

For instance, I experimented with a few known Google Fonts, creating combinations of typefaces that made sense and promoted smooth readability in-line.

In fig 3a: I used the Montserrat font as my choice for the heading and Merriweather for the paragraph section. The combo can fit well in an online publishing web and mobile site. The mixture of serif and sans-serif font does well in finding the intersection between traditional and contemporary design.

When considering the section in Fig 3b, we observe the minimalist and straightforward nature of the text. I used Fjalla One for the heading text and Noto Sans for the paragraph. Most modern web designs are employing clean format for text and this typeface pair perfectly reflects the trend we see on most landing pages today.

4.0 Stick With One Typeface, Attain Mastery Before Moving On

If your business is just starting out and have novice designer, it is best practice to stick with one typeface before experimenting with others. Modern typefaces are available with different font weights, which can be helpful in certain situations, like in a button, label or a bold heading on the landing page.

There is no universal standard for weights but category names have been devised as seen in Fig 4 with words that progress from Thin, Light, Regular to Medium, Bold and Black to imply the proportional thickness of the font.

You also have the option of using Italics and underlined text but those should only be utilized when absolutely necessary.

5.0 Pay Attention to Contextual Sizing of Text

Once the designer is done with typeface selection, we proceed on to sizing the text. There are a number of ways and scientific tools to determine the perfect size for typefaces.

For instance, the Modular Scale system gets input in the form of base font-size and ratio, allowing the tool to scale the text to the appropriate sizes by multiplying the two input values. This is just one tool among many to create size guidelines.

The scaled sizes of the typefaces are then mapped onto the text list that includes different headings, a body text and caption text, as seen in fig 5.

However, there are a number of factors that should be considered when applying the sizes on the text:

Text that is too small can cause stress to a user’s eyes, especially when reading it from a mobile device. It is important that text size is legible enough that users can read it comfortably.

• Text that is too large can be problematic as well. Big sized text can distract users while they perform a task and it calls attention to itself instead of other graphical elements.

6.0 Avoid Using Fonts With Cursive/Handwritten Scripts

When presenting your online business, it is ideal to use fonts that are clean, simple and most importantly legible. Fonts that involve calligraphy or ones that are fundamentally cursive scripts; although are beautiful to the naked eye, but at times are insanely difficult to read or make sense of. Such scripts break the flow while scanning through the text.

7.0 Create a Design Guideline for Your Typography

In order to standardize design across your brand which includes your website, product line and social media campaign assets, it is imperative to set up a design guideline. One of the important components of this guideline includes typography.

In this phase, designers can modify attributes of the text such as color palette, effect, weight and size. I used Figma to draft a quick typography guideline in fig 7.

However, there are other popular tools as well such as Adobe’s Creative Cloud or Sketch (For Apple) that can be used to construct a similar looking guideline like this one.

Conclusion

Typography is not just about improving readability but contributes towards the look and feel of the web or mobile application.

It takes long hours to master the use of fonts and text placement, which requires designers to experiment, try and test different styles to find the perfect combination.

Typography is all around us, in both the digital and physical spaces — in books, in monuments, in historical landmarks, in pieces of paper, on our computers and more. I hope this piece serves as a starting point for your journey towards building the right image for your business.

Useful Resources

Google Fonts — https://fonts.google.com/
Adobe Typekit — https://typekit.com/
Modular Scale — http://www.modularscale.com
Typography Inspiration — https://www.typewolf.com/
Figma — https://www.figma.com/
Material Design — https://material.io/guidelines/style/typography.html

Works Cited:

1. Typography can make or break your design by Jonathan Z.White
   2. Getting Typography right in the digital Age by Nick Babich