fbpx
Typography UI design
UI/UX Design

Typography in UI Design – 5 points you need to know!

These days typography plays a significant role in making a user interface both clearly understandable and intuitive, as well as beautiful. Even though it might seem to be a very different thing to design a mobile application, website or a printed magazine, some principles of type-centric design apply for all of these and more. Learn all the rules of typography in UI design.Hierarchy and sizing

Hierarchy and sizing

To provide some basic structure to the design elements it’s crucial to put text in order. And when there is a hierarchy in your project there are text elements in different sizes. Would you make page headline larger than body copy? I hope not. Below you can find a cheat sheet presenting most common proportions for standard displays to make your design go smoothly.

Hierarchy & sizing

Fonts

There are plenty of font foundries and their vast offer to choose from. But when it comes to interface design less is more. No matter if you are going to purchase a professional font family or use some of freely available fonts simplest options are the best. In most cases simple means Sans-Serif because it is easy to read on digital displays but always keep in mind your project’s main purpose, its desired look and feel. Although I encourage you to find a perfect match it’s more than O.K. to stick with just a few free fonts for most of your UI projects. Here are some examples.

Fonts

If you would rather go with some more sophisticated look here are my top pick for paid fonts.

Paid Fonts

Text alignment

Whenever you wonder how to align text content in your project – go with left aligned (unless you work with Hebrew, Arabic or far east languages of course). It’s more than important to keep your content easily readable and left aligned will be your choice in most cases. In some – centered text might be a cool idea but keep it on the low and go with it only with headlines or short portions of lettering like quotes.

Text

Spacing

Line spacing is the vertical distance between lines of text. It makes the content easy to scan by eye and is important especially in large portions of text such as articles, blog posts or any longer paragraphs. Poor line spacing makes it difficult to read. A good practice is to make the line spacing about 150% the size of text height.

When you are combining different levels of text content i.e. overlines, headlines, body copy and call to action it’s also advisable to maintain a whitespace between these to make it more elegant and easy to read as well.

Spacing

Letter spacing is of course the horizontal distance between single letters. Usually you won’t be changing letter spacing much but I find it very neat to make the spacing looser when it comes to smaller uppercase labels (in input fields for instance), about 50 pt should do the trick.

Spacing 2

Colour

While it’s desirable to make the text black on white in most UI cases the first doesn’t necessarily has to be 100% black. Good contrast is key but too much of it can cause eye strain. Good practice is to make the copy slightly lighter than the header. I personally like to start with #121212 for headers and anything that has to stand out and #333333 or #555555 for body copy. Additional information like articles author or date created can sometimes be even lighter i.e. #AAAAAA.

Colour

I hope you will find the above useful when working on your new user interface project.

Check out previous posts on our blog >>> click!

Kamil

Kamil Gomulski, UI Designer

Designer with 10+ years experience in user interface and visual identity design. As an architecture and urban planning enthusiast he strongly believes in Sullivan’s „form follows function” principle which does not prevent him from surrounding himself with beautiful things, including putting emphasis on the high quality of projects carried out for clients. An avid dog lover.

Scroll to top