Hamza Mahmood Follow Technology Wizard. Coee and Motivation. Contributing writer for The Startup Grind and Towards Data Science (TDS) Jul 22 · 7 min read

How Impacts Your Business Outlook — A Primer For any up and coming business, establishing a proper mode of communication with users is mission critical to their success.

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

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

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 rst impression among users, which could be their last.

But where does the term typography, t 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 remains the same across the rest of the letters.

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

This write up aims at informing businesses and startups about how typography is a game changer when it comes to rst 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 just because they look nice or if its adding some avor 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 that it looks amateurish. Fig 1: Using more than 3 fonts can give the impression of an unprofessional website

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 Aliation

• 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. Fig 2a: Font-Family: AR Carter

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 g 2b.

Fig 2b: We need to design content for dierent age groups, both young and old.

Terminologies In 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 ow 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 modications 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 ow 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 g 3a: I used the Montserrat font as my choice for the heading and Merriweather for the section. The combo can t well in an online publishing web and mobile site. The mixture of and sans- serif font does well in nding the intersection between traditional and contemporary design.

Fig 3a: Heading Font — Montserrat & Paragraph Font — Merriweather

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 are employing clean format for text and this typeface pair perfectly reects the trend we see on most landing pages today. Fig 3b: Heading Font — Fjalla One & Paragraph Font — Noto Sans

4.0 Stick With One Typeface, Attain Mastery Before Moving On If your business is just starting out and have novice , it is best practice to stick with one typeface before experimenting with others. Modern typefaces are available with dierent font weights, which can be helpful in certain situations, like in a button, label or a bold heading on the landing page. Fig 4: Various font weights of the Roboto Typeface

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 scientic 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 dierent headings, a body text and caption text, as seen in g 5.

Fig 5: Scaled sizes (factor = 1.33) of text in Roboto Font

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 or ones that are fundamentally cursive scripts; although are beautiful to the naked eye, but at times are insanely dicult to read or make sense of. Such scripts break the ow while scanning through the text.

Fig 6: Hard or easy to read?

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, eect, weight and size. I used Figma to draft a quick typography guideline in g 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. Fig 7: Typography Guideline Created Using Figma

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 dierent styles to nd 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.gma.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