Typography and UI
What is typography?
Typography can be dated back to the 11th century, during the innovation of movable type. Before the digital age, typography was a specialized craft associated with books and magazines, and eventually public works. The first example of typography can be seen in the Gutenberg Bible, which kick-started a typography revolution in the west. Fun fact: the style of type used in the Gutenberg Bible is now known as Textura, and you’ll find it in the font drop-down menu on major desktop applications today!
Fast forward to modern-day, where typography is mostly associated with both the digital world and print. With the birth of the internet came a creative explosion of the art of typography. Suddenly, web designers had an abundance of fonts and type options at their disposal, making typography more visually diverse than ever before.
Why is typography important?
Typography is so much more than just choosing beautiful fonts: it’s a vital component of user interface design. Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone. Typography should guide and inform your users, optimize readability and accessibility, and ensure excellent user experience.
Alignment
Alignment is the process of unifying and composing text, graphics, and images to ensure there is equal space, size, and distances between each element. Many UI designers create margins to ensure that their logo, header, and body of the text are aligned with each other. When aligning your user interface, it’s good practice to pay attention to industry standards. For example, aligning your text to the right will seem counter-intuitive for readers who read left to right.
Color
Color is one of the most exciting elements of typography. This is where designers can get creative and elevate the interface to a new level. Text color, however, is not to be taken lightly: nailing your font color can make the text stand out and convey the tone of the message — but getting it wrong can result in a messy interface and text that clashes with the site colors.
Color has three key components: value, hue, and saturation. A good designer will know how to balance these three components to make the text both eye-catching and legible, even for those with visual impairments. Often, designers will test this by viewing the text in grey scale (without color) and making tweaks if the text is too dark or too light against the background color.
Choosing appropriate colors:
Red — alertness, power, passion — actually stimulates blood flow looking at it.
Orange — playfulness, friendliness, affordability — less stimulating than red, but still energetic.
Yellow — happy, anxious, energetic — also used in warning signs because it catches attention.
Green — growth, balance, wealth (U.S.) — the middle color of the rainbow accurately represents a nice balance.
Blue — trustworthy, inviting, calm — the most popular color on the Internet, it’s trustworthy and calming attributes make it attractive to both financial and social media companies.
Purple — mysterious, luxury, creativity — the color of royalty still holds an air of decadence.
White — virtuous, sterile, simple — associated with both doctors and holiness, white’s also a go-to choice for unobtrusive backgrounds.
Black — sophisticated, edgy, dominating — the most powerful color will give your site oppressive feelings if overused.
Hierarchy
Establishing hierarchy is one of the most vital principles of typography. Typographical hierarchy aims to create a clear distinction between prominent pieces of copy that should be noticed and read first, and standard text copy. In an age of short attention spans brought about by social media, designers are urged to be concise and create typefaces that allow users to consume the necessary information in short amounts of time.
How do you choose the right typeface for your website?
Now that we’ve familiarized ourselves with the different typography elements, let’s talk about the process of choosing typefaces for your interface. With so many different fonts and typefaces to choose from, it’s easy to feel overwhelmed. Making the right choice depends on so much more than just seeing what looks nice. Here are a few key considerations:
Think about personality
How do you want your users to feel when they first enter your website. Do you want to emulate a friendly atmosphere? Do you want the site to feel high-end, welcoming, playful, or serious? It’s imperative that the typography reflects the personality of the brand or product. A good starting point, when faced with this challenge, is to define the core traits of your brand, and start to gather typefaces that reflect these traits. From there, you can begin to notice a trend.
Reflect on tone
It’s equally important to consider how the font harmonizes with the tone of the message. For example, if you want to convey serious or important information, choose a less stylized or decorative font that is both legible and will limit distraction.
Don’t skimp on function
A function is just as vital as form: there’s nothing worse than a website that looks pretty but is entirely illegible, leading you to click the wrong button or take a wrong turn because the instructions were unclear. When deciding what typefaces to include in your interface, set the style, aesthetic, and voice aside and reflect on whether the font is legible, readable, and accessible. Can the text be legible without strain? Are the characters distinct enough?
Consider performance
One thing that many designers often overlook is choosing typefaces that are web browser friendly. Commonly used font libraries such as Google fonts offer web-based font files that can be rendered perfectly in a browser without any issues. Pro tip: when downloading web fonts, never download more character sets than you need to. This way, you’ll avoid excess weight!
Get inspired
If you’re not sure where to start, take some time to see what other people are doing. Open your eyes to the typography that you see around you. Can you notice similar patterns? Can you see good and bad examples of typography? Even following typography hashtags on social media or looking up typography on Pinterest will give you some good ideas of what’s out there. You can also look at these eight typography trends for further inspiration.
Take some time to test
The best way to decipher which font to use for your interface? Test, test, and test! By gathering useful feedback from real users, you’ll get a clearer insight into what works, what doesn’t, what is legible and what feels counter-intuitive or clunky.
Few extra tips and summary
- Don’t provide a lot of options to the user on a screen. Using the drop-down lists and other similar designs could help to improve the user experience.
- When displaying a product, using real-world images help incite interest in the person viewing the website or the application. Studies show that people’s eyes are drawn to real people.
- Consistency makes an interface more appealing. Inconsistent websites would frustrate users as they would expect certain elements in a specific position on the interface. Inconsistent websites would mean the user has to relearn the interface on every new page they visit. Hence make sure you use consistent typefaces, spaces, sizes of the elements, icons, images, layouts, and color.
- Use the white space(space) carefully. Filling up an interface with too many images and elements is an easy mistake. Leaving space on your interface would give it a “minimalist” look and help draw the users’ attention towards what is important on the screen. If you want to make UI that looks designed, you need to add in a lot of breathing room.
- Using certain interface elements that give the users a warning if they are doing something wrong will help reduce errors and make the users aware of it.
- When creating an interface starts with a gray scale and make the layout first. Color can be added after completing the basic layout. Generally, black and white with an accent color give a punchy look to the interface.
- Subtle animations can improve user experience significantly. For example, when the mouse has hovered on a button, a change in color could be done and after clicking the button, a tick mark would give the user feedback that it is clicked.
So, be sure to follow these tips and work on making better UI. Do analyze popular pages and get new ideas for the typography and other elements used in them. Finally, implement them in your designs!
A collab with Siddharth Singh.
