Archive for the ‘UI Design’ Category:

16 little UI design rules that make a big impact

By Adham Dannaway on January 18, 2024

User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.

Luckily, UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules.

Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.

I love rules and logic, but design decisions are rarely black and white. Rather than strict rules that you must follow, think of the following advice as helpful guidelines that work well in most cases.

The quickest way to learn is by doing, so let’s get started.


Let’s fix this example using logical rules

The following 2 designs are for the property details page of a short-term property rental app. The first one is the original design. The second is the result of applying some logical rules or guidelines.

UI design example before and after

Even without much visual or interaction design experience, you’ll probably notice that the original design feels messy, complicated, and difficult to use. This is because it contains many problematic design details that pose a risk to usability. Perhaps you can already spot a few?

Let’s fix the problems with the original design one at a time using the following logical rules or guidelines:

  1. Use space to group related elements
  2. Be consistent
  3. Ensure similar looking elements function similarly
  4. Create a clear visual hierarchy
  5. Remove unnecessary styles
  6. Use colour purposefully
  7. Ensure interface elements have a 3:1 contrast ratio
  8. Ensure text has a 4.5:1 contrast ratio
  9. Don’t rely on colour alone as an indicator
  10. Use a single sans serif typeface
  11. Use a typeface with taller lower case letters
  12. Limit the use of uppercase
  13. Use regular and bold font weights only
  14. Avoid pure black text
  15. Left align text
  16. Use at least 1.5 line height for body text

1. Use space to group related elements

Breaking up information into smaller groups of related elements helps to structure and organise an interface. This makes it faster and easier for people to understand and remember.

You can group related elements using the following methods:

  1. Place related elements in the same container
  2. Space related elements close together
  3. Make related elements look similar
  4. Align related elements in a continuous line

Using containers is the strongest visual cue to group interface elements, but it can add unnecessary clutter. Look for opportunities to use other grouping methods, they’re often more subtle and can help simplify designs.

Using space in particular is a very effective and simple way to group related elements. You can also combine grouping methods to help display groupings more clearly.

In our example, the lack of space between content makes the design look cluttered and difficult to understand. Increasing spacing helps to clearly group content, making it more organised and easier to understand.

User interface example without sufficient spacing vs one with sufficient spacing

2. Be consistent

Consistency in UI design means that similar elements look and work in a similar way. This should be true both within your product and when compared with other well-established products. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work.

In our example, the icon styles are inconsistent, as some are filled and others aren’t. This could confuse some people, as filled icons often indicate that an element is selected. Outlining all icons with a 2pt stroke weight and rounded corners improves consistency and gives each icon a similar visual weight.

Inconsistently styled icons vs consistently styled icons

Text labels are also added to the icons to help ensure people can understand what they mean, especially those using screen readers (software that describes an interface, using speech or braille, to someone who can’t see it).

UI design example with inconsistent icon styles vs one with consistent icons styles

3. Ensure similar looking elements function similarly

If elements look similar, people will expect them to work in a similar way. So try to ensure that you use a consistent visual treatment for elements with the same functionality. Conversely, try to ensure elements with different functionality look different.

In our example, the icon containers have a similar visual style to the “book now” button. This makes them seem interactive, even though they’re not. Removing the blue colour and button styling from the icons helps to avoid them being mistaken for interactive elements.

Updated UI design example that ensures similar looking elements function similarly

4. Create a clear visual hierarchy

Not all information in an interface has the same level of importance. Aim to present information in order of importance by making more important elements look more prominent.

A clear order of importance, or visual hierarchy, helps people scan information quickly and focus on areas of interest. It also improves aesthetics by creating a sense of order. You can create a clear visual hierarchy using variations in size, colour, contrast, spacing, position, and depth.

Here’s an example of a website hero banner without a clear visual hierarchy, followed by one with elements clearly presented in order of importance.

Example of a website hero banner without a clear visual hierarchy
Example of a website hero banner with a clear visual hierarchy

A quick and easy way to test whether your visual hierarchy is clear is to use The Squint Test. Simply squint your eyes and look at your design. Alternatively you can move further away from the screen or blur your design. You should still be able to tell what the most important elements are and recognise what the interface is for.

Let’s apply the Squint Test to our example. We can see that there are multiple elements with similarly strong prominence competing for attention. Meanwhile, the primary action in the bottom left doesn’t stand out at all.

Applying the Squint test to the example

The primary action should generally be the most prominent element on an interface. Giving it a high contrast background colour and bold font weight helps achieve this. This also fixes an accessibility issue with the low contrast button, which we’ll look into later.

Giving the primary action  a high contrast background colour and bold font weight to make it the most prominent element

Applying the Squint Test to the updated design, the primary action is clearly the most prominent element.

Applying the Squint Test to the updated design, the primary action is clearly the most prominent element.

The visual hierarchy is now clearer, but there’s still room for improvement. For example, the block of body text is still too prominent relative to its level of importance. We’ll learn some quick typography guidelines shortly, which will help correct the visual hierarchy.

5. Remove unnecessary styles

Unnecessary information and visual styles can be distracting and can increase cognitive load (the amount of brain power required to use an interface). Avoid unnecessary lines, colours, backgrounds, and animations to create a simpler, more focused interface.

Unnecessary white space and borders are removed to simplify the design

In our example, the white space and borders around the image add unnecessary visual complexity. They’re not needed to convey information or group elements, so we can safely remove them to simplify the design.

Unnecessary white space and borders are removed to simplify the design

6. Use colour purposefully

Use colour sparingly and with purpose. Try to avoid using colour purely for decoration, as it can be confusing and distracting. Start with black and white and introduce colour where it conveys meaning.

A simple and effective approach is to apply the brand colour to interactive elements like text links and buttons. This helps teach people what’s interactive and what’s not. Try to avoid using the brand colour on non-interactive elements.

You don’t need to add colour to all interactive elements, as some already have visual cues that indicate they’re interactive. For example, the cards in the following example still feel interactive, with or without the blue coloured link.

Card component with a blue underlined link vs one without

In our original example, the blue heading might look nice, but it makes the text seem interactive. To help avoid confusion, we remove the blue colour from the heading as it’s not interactive.

We also remove the blue colour from other non-interactive elements like the star rating. This makes it much easier to see what’s interactive and what’s not.

Removing colour from non interactive elements in the example design

7. Ensure interface elements have a 3:1 contrast ratio

Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are many online tools to help you measure contrast ratios between different colours.

In order to help ensure people with vision impairments can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. This means user interface elements, like form fields and buttons, need to have at least a 3:1 contrast ratio.

In our example, the arrow icon contrast is too low. Adding a shadow to the icon and a gradient overlay on the top third of the image gives the icon sufficient 3:1 contrast, regardless of the image it sits on.

Adding a shadow to the icon and a gradient overlay on the top third of the image to give the icon sufficient 3:1 contrast

The primary button contrast in the original example was also too low. We fixed it previously when addressing the visual hierarchy, but it’s also worth mentioning here.

Increasing primary button contrast to at least 3:1

The risk with the low contrast button is that people with low vision might not identify it as a button, as they can’t see the button shape. Increasing the button contrast ratio above 3:1 makes the button accessible and also helps correct the visual hierarchy.

Increasing the arrow and button contrast to a ratio above 3:1 gives us the following design. We’re getting there bit by bit, but we’ve still got more issues to fix.

Example design with arrow and button contrast above a 3:1 ratio

8. Ensure text has a 4.5:1 contrast ratio

In order to help ensure people with vision impairments can clearly read text, it needs to meet the following WCAG 2.1 level AA contrast requirements:

  • Small text (18px and under) needs a minimum contrast of 4.5:1.
  • Large text (above 18px with bold weight or above 24px with regular weight) needs a minimum contrast of 3:1.

In our example, the small text in the photo count element has insufficient contrast. We increase the contrast ratio above 4.5:1 by increasing the opacity of the grey container and also adding a text shadow.

Opacity of the grey photo count container is increased above 4.5:1

The contrast of the location text is also too low. The thin font weight makes it even harder to read. Using a darker shade of grey helps make the text more accessible. We’ll make further updates to the text to improve it shortly.

Example design where the opacity of the grey photo count container is increased above 4.5:1

9. Don’t rely on colour alone as an indicator

There are many different types of colour blindness and they mainly affect men. Commonly, people who are colour blind have difficulty distinguishing between red and green, but some aren’t able to see any colour at all.

To ensure an interface is accessible to those who are colour blind, you can’t rely on colour alone to convey meaning or distinguish visual elements. You need to use additional visual cues to differentiate interface elements.

In our example, the colour blue is used on the “reviews” text to indicate that it’s a link. If colour is removed, the link text looks the same as other text, so the colour blind can’t tell it’s a link. Underlining the link text clearly differentiates it from other text in the absence of colour.

Comparison of link text with and without an underline when colour is removed

10. Use a single sans serif typeface

A typeface is a set of related fonts with a similar style or aesthetic. Helvetica is an example of a typeface. Fonts are variations within a typeface, like weights or sizes. For example, Helvetica bold and Helvetica regular are 2 different fonts within the Helvetica typeface.

It’s safest to use a single sans serif typeface for interface design, as they’re generally the most legible, neutral, and simple.

In our example, the heading uses a detailed serif typeface that’s a bit difficult to read and could be distracting to some. It also has a personality that might not match some of the photos in this property rental app. Simplifying it using a sans serif typeface can help improve usability and aesthetics.

Detailed serif typeface vs simple sans serif typeface
Detailed serif typeface in example is updated to a simple sans serif typeface

11. Use a typeface with taller lower case letters

Look for typefaces with taller lower case letters and greater letter spacing, as they’re generally more legible at small sizes. The height of lowercase letters in a typeface is known as the x-height.

Comparing the x-height of Gill Sans and Lato typefaces

Our example uses the Gill Sans typeface, which has a relatively low x-height. Changing the typeface to one with a larger x-height, like Lato, helps to improve readability.

Comparing the x-height of Gill Sans and Lato typefaces in an example paragraph of text

Here’s what our example looks like after the typeface is updated from Gill Sans to Lato.

Example text updated from Gill Sans to Lato typeface

12. Limit the use of uppercase

Unless you’re shouting at people, there aren’t many valid reasons to use uppercase. IT’S LOUD AND DIFFICULT TO READ.

When you read, you look at the shape of a word, rather than looking at each letter. The shape helps you recognise the word more quickly. Uppercase words all have the same rectangular shape. This forces you to read each letter one by one.

The shape of an uppercase vs sentence case word

In our example, the location text uses uppercase. Changing it to sentence case, where only the first word and proper nouns (names of people, places or things) are capitalised, helps to improve readability.

The shape of an uppercase sentence vs one in sentence case
Example text changed from uppercase to sentence case

13. Use regular and bold font weights only

Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.

Keep your design system simple and concise by using regular and bold font weights only.

Examples of thin, light, regular, semi-bold, and bold fonts with all of them crossed out except for regular and bold

Quick usage tips:

  • Use bold font weight for headings to emphasise them.
  • Use regular font weight for other smaller text.
  • If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.

In our example, the location text uses a light font weight. Even though we’ve increased the contrast above the required 4.5:1 contrast ratio, the thin characters could still be difficult for some people to read. Increasing the font weight to regular helps improve readability and simplifies the design.

Location text in light font weight vs regular font weight
Example with location text in light font weight vs regular font weight

14. Avoid pure black text

For UI design, it’s generally safest to avoid pure black, as it has a very high contrast against white. This high contrast can cause eye strain and fatigue when reading text.

Black has 0% colour brightness and white has 100% colour brightness. The large difference in colour brightness causes our eyes to work harder. It’s safest to avoid pure black against white and opt for a dark grey instead.

In our example, pure black is used on multiple elements. Changing it to a dark grey helps to improve readability. Previously when looking at visual hierarchy, we noted that the property description text was too prominent. To make sure interface elements are presented in order of importance, we use a lighter grey for the property description text to decrease its prominence.

Black text in the example is changed to dark grey

15. Left align text

English is read from left to right, downwards in an F-shaped pattern. So it’s best to keep text left aligned for optimal readability. For long body text, it’s safest to avoid centre aligned or justified text. It’s more difficult to read, especially for those with cognitive disabilities.

Centre alignment can work for headings and short text, as it can be quickly read. However, centre alignment makes longer body text harder to read, because the starting point of each line constantly changes. Your eyes need to work harder to find the starting point of each line.

An example of centre aligned text vs left aligned text

In our example, the property description text is centre aligned. Left aligning the text improves readability and is also consistent with the left aligned text above.

In our example, the property description text is changed from centre aligned to left aligned.

16. Use at least 1.5 line height for body text

Line height is the vertical distance between two lines of text. The space between lines helps prevent people from rereading the same line of text. It also looks and feels more comfortable to read.

For accessibility and readability, especially for long body text, ensure that line height is at least 1.5 (150%). Keeping line height between 1.5 and 2 generally works well.

Diagram showing the difference between font size and line height

In our example, the line height is only 1 (100%). Increasing it to 1.6 (160%) helps to improve readability.

In our example, the line height is changed from 1 (100%) to 1.6 (160%).

We fixed it!

With a handful of simple but powerful UI design guidelines, we quickly found and fixed a whole bunch of problems with our example design. Guidelines can seem restrictive, but they’re not meant to limit your creativity. Instead, think of them as a solid foundation to build, explore, and experiment on.

UI design example before and after

I hope you’re starting to see that UI design doesn’t have to be so hard. It might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines like the ones we just learned. Using objective logic, rather than subjective opinion, makes it faster and easier to design intuitive, accessible, and beautiful interfaces.


Want more?

These are just a few of the logic-driven guidelines from my UI design book. You’ll find hundreds more with detailed examples in the book.

ui design book

PS If you found this article helpful, share it with others and follow me on Twitter and LinkedIn for daily design tips, tools, resources, and inspiration. 

Archive for the ‘UI Design’ Category:

16 little UI design rules that make a big impact

By Adham Dannaway on January 18, 2024

Contrary to popular belief, user interface design isn’t just about creating pretty pixels. Of course, making an interface look great is important, but there’s much more to it than that. Learning the how and why behind interface design will ensure that every design detail has a logical purpose behind it. (more…)

Archive for the ‘UI Design’ Category:

16 little UI design rules that make a big impact

By Adham Dannaway on January 18, 2024

I’ve been a designer for nearly 2 decades now and I’ve used buttons in many projects, but I don’t think I’ve ever taken the time to think about button design in detail. It wasn’t until recently that I realised I’d been making some common button design mistakes (and I’m not the only one).

If you pull out your phone, open a few apps and browse a few websites, I’ll bet you come across quite a few buttons. I’ll also bet that many of those buttons have issues that pose a potential risk to usability and accessibility. There are a lot of problematic buttons out there, even from large companies and experienced designers, so I put together some quick and practical button design tips to avoid these problems and design better buttons.

Firstly, I’ll go through some popular button designs and highlight their problems using objective UI design principles. I’ll avoid any subjective thoughts based on aesthetics, “gut feeling”, or what looks pretty. I also won’t go into code here, as there’s a lot we can do on the design side of things first. I’ll finish up with some button design tips and suggestions for best practice button design.


Common button design mistakes

For most projects, your design system will need 3 button weights to indicate the importance of actions: primary, secondary, and tertiary. In this article, we’ll compare groups of these 3 button weights.

I’ve highlighted the issues with some popular button designs below. These issues pose a potential risk to usability, so it’s safest to avoid them if possible. We’re aiming to at least meet WCAG 2.0 level AA accessibility requirements as this is the most common standard and a good place to start.

Button group 1

Buttons styles in which primary button has a high contrast fill, secondary button has a low contrast fill, and tertiary button is underlined text.

User interface components like form fields, buttons, and tabs, need to have a colour contrast ratio of at least 3:1. This helps people with vision impairment tell the difference between different components. Decorative styles that aren’t required to distinguish interface components can have lower contrast.

In this example, the secondary button fill contrast ratio against the background is less than 3:1, which is too low to clearly indicate the button shape to the vision impaired.

Some may argue that the secondary button fill is decorative and doesn’t need to have a contrast ratio of 3:1 to be accessible. The fill is needed to identify the secondary button as a button. Without the fill, it’s just plain blue text with no indicator of interactivity but colour. You could add a high contrast border to the secondary button to fix this issue.


Button group 2

Buttons styles in which primary button has a high contrast fill, secondary button has a grey outline with no fill, and tertiary button is underlined text.

The button styles in group 2 have the following issues:

  • The secondary button could be mistaken as being unavailable or in a disabled state due to its light grey colour. It’s safest to avoid light grey buttons to reduce potential confusion.
  • The secondary button text contrast ratio is less than the required 4.5:1 WCAG guideline, making it difficult to read for some.
  • The secondary button border is also less than the required 3:1 ratio.

Button group 3

Buttons styles in which primary button has a high contrast fill, secondary button has a high contrast fill of a different colour, and tertiary button is underlined text.

To ensure that a wider audience can read small text (18px and under), it should have a colour contrast ratio of at least 4.5:1. The button styles in this example have the following issues:

  • The primary and secondary buttons conflict due to their similarity. This confuses the visual hierarchy, making it unclear which is more important.
  • Since both buttons have the same style, the only way to tell the difference between them is via their colour. This means people who are colour blind may not be able to differentiate between them.
  • The contrast ratio between the buttons is also less than the required 3:1. This means that people who are vision impaired may not be able to clearly distinguish between them.

Button group 4

Buttons styles in which primary button has a high contrast fill, secondary button has a low contrast grey fill, and tertiary button is underlined text.

These button styles have similar issues to the previous example:

  • The primary and secondary buttons conflict due to their similar style and lack of contrast.
  • The secondary button text contrast ratio is too low and should be at least 4.5:1 to ensure it’s accessible.

Button group 5

Buttons styles in which primary button has a high contrast fill, secondary button has a low contrast grey fill, and tertiary button has an even lower contrast grey fill.

These button styles are too similar for the vision impaired to distinguish between them. The contrast ratio between buttons is the only way to tell the difference between them and it’s too low (contrast needs to be at least 3:1). Buttons should have a clear visual hierarchy that doesn’t rely on colour alone.


Button group 6

Buttons styles in which all buttons are outlined in slightly different colours with no fill.

These button styles have similar issues to the example above:

  • Button styles are too similar in contrast and style for the vision impaired to tell the difference between them.
  • The contrast ratio of the tertiary button border must be at least 3:1 to be accessible and clearly identify it as an interactive element.

Button group 7

Buttons styles in which primary button has a high contrast fill, secondary button has a stroke with no fill, and tertiary button is coloured text.

When it comes to accessibility, it’s important that we don’t rely on colour alone to distinguish interface elements. Those who are colour blind won’t be able to tell the difference between elements.

In this example, the tertiary button isn’t accessible because colour is the only indicator that it’s interactive. This means that those who are colour blind may not be able to distinguish it from plain text.

The context, position and close proximity of the tertiary button to other buttons may help distinguish it from plain text in some cases, but there’s still a risk that it may cause confusion.


Button group 8

Buttons styles in which primary button has a round shape that’s different to the rectangular shape of other buttons.

Every detail of an interface design should have a logical purpose. Why are the primary and secondary button shapes different in example 8? Do they function differently? Elements that function the same should look the same. Avoid inconsistent button shapes as they can cause confusion.


Button group 9

Buttons styles in which primary button has a high contrast outline, secondary button has a low contrast fill, and tertiary button is underlined text.

Visual hierarchy is how we communicate the relative importance of interface elements. The purpose of the 3 button styles is to indicate the importance of actions. This helps people make decisions. The button styles in this example have the following issues:

  • The visual hierarchy is unclear as the primary and secondary buttons have similar visual weight or prominence.
  • The secondary button background contrast ratio is below 3:1, which is too low to clearly indicate the button shape to the vision impaired.

Button design tips

Based on the previous button design mistakes, here are some quick and practical tips to keep in mind to design user-friendly and accessible buttons:

  • Buttons should have a clear visual hierarchy that doesn’t depend on colour alone.
  • The contrast ratio of the button shape must be at least 3:1 to ensure people who are vision impaired can identify it as an interactive element.
  • Button text contrast ratio must be at least 4.5:1 to meet WCAG 2.1 level AA accessibility requirements.
  • If buttons have identical styles, the contrast ratio between them must be at least 3:1 to ensure they’re distinguishable to the vision impaired.
  • Use a large target area (at least 48pt by 48pt) to ensure people can easily select buttons.
  • Make sure there’s sufficient space between buttons so people don’t mistakenly select the wrong one. I usually use 16pt to be safe.

A safe option for better buttons

The following button styles are familiar, accessible, and have a clear visual hierarchy that isn’t dependent on colour alone.

Buttons styles in which primary button has a high contrast fill, secondary button has a high contrast outline with no fill, and tertiary button is underlined text.

You might have noticed that the tertiary button looks identical to a text link, but is that really an issue? Traditionally text links were designed to go somewhere and buttons were designed to perform an action. These days, many are unaware of this interaction pattern and certainly wouldn’t expect it, so I don’t think we need to stick to it. 

In the following hero banner example, links are used to take people to another page. The problem is that links aren’t prominent enough to indicate that they’re the most important actions on the page.

Hero banner example with 2 underlined text links highlighting the main calls to action.

Changing the links to look like buttons helps make them more prominent and create a clearer visual hierarchy. The fact that they’re taking you somewhere, rather than performing an action doesn’t matter.

Hero banner example with 2 buttons highlighting the main calls to action.

In the below message dialog box example, we can see our 3 button styles in action. Even though the tertiary button looks like a link, it’s clear in this context that clicking it will perform an action rather than take you to another page. Again, the line between links and buttons is blurred.

Example of a message dialog box with primary, secondary and tertiary buttons.

Just ensure buttons are coded as buttons and links are coded as links, regardless of what they look like. This will help you avoid accessibility issues with screen readers.

These button styles aren’t the only way to design buttons, but they’re free of the many usability and accessibility risks mentioned above, so they’re a pretty safe option. I hope you found these button design tips helpful and I’d love to hear your feedback via Twitter.


Learn more practical UI design tips

These are just a few of over 100 logic-driven design guidelines from my UI design book. If you found it helpful, check out the book and follow me on Twitter and LinkedIn for daily design tips.

ui design book

Archive for the ‘UI Design’ Category:

16 little UI design rules that make a big impact

By Adham Dannaway on January 18, 2024

Interfaces can quickly get cluttered. An easy way to declutter them is by simplifying the thing that takes up the most space, the text. Removing complexity helps to decrease cognitive load (the amount of brain power required to use an interface), improve legibility, and it looks a lot neater too.

With so many typefaces to choose from, it can be difficult to know where to start. Here are a few tips to help you choose a suitable typeface for UI design:

  • Sans serif, as they’re generally the most legible, neutral, and simple. This makes them a safe option for UI design.
  • Relatively tall lower case letters (x-height) and comfortable letter spacing for optimal legibility.
  • ‘Variable’ fonts to allow for more style customisation using a single font file. Non-variable fonts have a limited set of weights and styles separated out into different font files. This takes up more space and can affect site performance.
  • Modern geometric style for a contemporary vibe.
  • Constant stroke thickness (low contrast) for a clean and minimal feel.

The typefaces on this list have most of these characteristics. A typeface for UI design doesn’t need to have all of these characteristics, but they generally help.

Here are my go-to sans serif typefaces for optimal legibility and simplicity.


1. Figtree

By Erik Kennedy

Figtree is one of my favourite all-round typefaces for modern UI design. Recently released, it’s like Erik combined all the nicest parts of the top typefaces. It’s very versatile too, as it has a simple and friendly vibe.

Get Figtree typeface

Figtree typeface

2. Satoshi

By Indian Type Foundry

You can’t go wrong with this modern and minimal sans serif. It’s neat, distraction-free, and comes with lots of OpenType features to allow for more customisation. Less curves make it feel a bit more sharp/serious.

Get Satoshi typeface

Satoshi typeface

3. DM Sans

By Jonny Pinhorn

Round letters with a nearly constant stroke thickness (low contrast) help make it neat and tidy. Tall lower case letters make it great for use in small text. It’s not a variable font, but I still love it anyway.

Get DM Sans typeface

DM Sans typeface

4. Plus Jakarta Sans

By Tokotype

Extra tall lower case letters (x-height) help make it legible and friendly. The almost constant stroke thickness (low contrast) helps to simplify this typeface and give it a minimal vibe.

Get Plus Jakarta Sans typeface

Plus Jakarta Sans typeface

5. Inter

By Rasmus Andersson

A favourite amongst designers. It’s great out of the box, but also comes with some really clever OpenType features under the hood. This allows you to tailor functionality and aesthetics to your specific needs.

Get Inter typeface

Inter typeface

6. Manrope

By Mikhail Sharanda

Manrope is a beautiful modern combination of different font types:

  • Slightly condensed, so you can fit more text on a line.
  • Tall rather than rounded (semi-geometric).
  • Din/Grotesque Numbers are super clean too.

Get Manrope typeface

Manrope typeface

7. Open Sans

By Steve Matteson

A humanist san serif typeface that’s clean, modern, neutral, and friendly. It looks familiar as it was commissioned by Google in 2011. A relatively tall x-height makes it highly legible on screen at small sizes.

Get Open Sans typeface

Open Sans typeface

8. Urbanist

By Corey Hu

Modern and neutral, this geometric sans-serif will give your interface a clean and contemporary vibe. Its almost constant stroke thickness (low-contrast) and lack of curves makes it sharp and minimal.

Get Urbanist typeface

Urbanist typeface

9. Lato

By Łukasz Dziedzic

Lato is a very popular and clever typeface. It looks neutral at a small size, but shows its character at a large size. Curved corners add warmth and friendliness, while its condensed width helps reduce line wrapping.

Get Lato typeface

Lato typeface

10. Quicksand

By Andrew Paglinawan

Quicksand has a lot more personality than the other more neutral typefaces on the list. Its rounded ends make it soft and friendly, while its geometric shapes keep it modern and minimal.

Get Quicksand typeface

Quicksand typeface

I hope these simple sans serif typefaces come in handy for your next design project. They’re safe and neutral typefaces for UI design, so they should work for most projects. I’m not saying that you shouldn’t use serif typefaces for interface design. They can work really well in lots of cases, but it’s generally safest to use simple sans serifs until you gain more experience.


Want more UI design tips?

Choosing the right typeface is just the first step in making interface text beautiful and easy to read. Learn about typography, colour, layout, and much more from my logic-driven UI design book.

To get a better idea of what to expect in the book, check out this UI design case study to redesign an example user interface using logical rules.

ui design book

PS If you found this article helpful, share it with others and follow me on Twitter and LinkedIn for daily design tips, tools, resources, and inspiration. 

Archive for the ‘UI Design’ Category:

16 little UI design rules that make a big impact

By Adham Dannaway on January 18, 2024

Some very clever developers on Reddit have put their creative minds to the test to come up with some crazy ideas for the worst volume control UI design in history.

Obviously, there isn’t anything wrong with the standard volume control slider, it’s been around for ages and does its job well. As per Jakob’s Law, it’s safest to stick with common, tried and tested UI patterns that people are familiar with. If you’re not reinventing the wheel, there’s usually very little risk that there will be usability issues with your UI design. 

Playing it safe might sound a bit boring, but you can save a lot of time and money on user testing by sticking with what people are used to. It will also give you more time to focus on solving more important problems that will make a larger impact.

That being said, I love these crazy ideas on how we might reinvent the volume control to make it super complicated to use. Check them out below and let me know your favourite via Twitter.

Launch to set the volume
Launch to set the volume
Radio buttons volume control
Radio buttons volume control
Jump higher to increase the volume
Jump higher to increase the volume
Shoot the appropriate arrow to increase or decrease the volume
Shoot the appropriate arrow to increase or decrease the volume
Keep tapping to increase the volume
Keep tapping to increase the volume
Wind up that volume
Wind up that volume
Latitude based volume control
Latitude based volume
Pump up that volume
Pump up that volume
Microphone based volume control
Microphone based volume
Control the volume via an electrical circuit
Control the volume via an electrical circuit
Heat up the volume by adding wood to the fire
Heat up the volume by adding wood to the fire
Colour in to increase the volume
Colour in to increase the volume
Beat a dead horse to increase the volume
Beat a dead horse to increase the volume
Play snakes to set the volume
Play snakes to set the volume
Calculate the volume
Calculate the volume
Play pong to set the volume
Play pong to set the volume
Tilt to control the volume
Tilt to control the volume
Roll the dice to set the volume
Roll the dice to set the volume

I hope you enjoyed these as much as I did, let me know your favourite via Twitter. You can also find more examples on Reddit.

If you’re looking to improve your UI design skills by applying practical, objective UI design principles, feel free to check out my UI design book and follow me for more tips.

ui design book