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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Top 10 free typefaces for UI design
By Adham Dannaway on June 13, 2023
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.
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:
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:
Place related elements in the same container
Space related elements close together
Make related elements look similar
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Hereâs what our example looks like after the typeface is updated from Gill Sans to Lato.
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.
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.
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.
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.
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.
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.
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.
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.
In our example, the line height is only 1 (100%). Increasing it to 1.6 (160%) helps to improve readability.
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.
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.
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:
Top 10 free typefaces for UI design
By Adham Dannaway on June 13, 2023
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:
Top 10 free typefaces for UI design
By Adham Dannaway on June 13, 2023
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 styles; primary, secondary and tertiary. They need to have a clear visual hierarchy to display actions of varying importance. In this article, weâll compare groups of these 3 button styles.
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
To help the vision impaired tell the difference between user interface components (like form field borders, buttons and tabs), interface components need to have a colour contrast ratio of at least 3:1. Decorative styles that arenât required to distinguish interface components can have a lower contrast ratio.
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, but I think the fill is needed to identify the secondary button as an actionable element. Without the fill, itâs just plain blue text with no affordance but colour. We could also add a border to the secondary button to fix this issue.
Button group 2
Itâs common for disabled buttons to be light grey in colour. The secondary button in this example could be mistaken as being in a disabled state due to its light grey colour. I think itâs safest to avoid light grey buttons to reduce potential confusion. Iâd also suggest avoiding disabled buttons if you can, but thatâs a discussion for another day.
Button group 3
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 secondary button text contrast ratio is too low and should be at least 4.5:1 to ensure itâs accessible.
The primary and secondary buttons conflict due to their similar style and lack of contrast. This breaks the visual hierarchy and makes it unclear which action is the most important. Since the buttons have the same style, a contrast ratio of at least 3:1 is needed to clearly distinguish between them.
Button group 4
These button styles have similar issues to the previous example:
The secondary button could be mistaken as being in a disabled state due to its light grey colour.
The secondary button text contrast ratio is too low and should be at least 4.5:1 to ensure itâs accessible.
The primary and secondary buttons also conflict due to their similar style and lack of contrast.
Button group 5
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
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 stroke must be at least 3:1 to be accessible and clearly identify it as an actionable element.
Button group 7
When it comes to accessibility, itâs important that we donât rely on colour alone to distinguish interface elements. Those who are colourblind wonât be able to tell the difference between elements.
In this example, the tertiary button isnât accessible as the only indicator that itâs actionable is colour. This means that those who are colourblind 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
Every detail of an interface design should have a logical purpose. Why are the primary and secondary button shapes different in this example? Do they act differently? Avoid inconsistent button shapes as they can cause confusion.
Button group 9
Visual hierarchy is how we communicate the relative importance of interface elements. The purpose of the 3 button styles is to indicate which actions are more important so that people know what to do next. 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.
The secondary button fill contrast ratio is below 3:1, which is too low to clearly indicate button shape to the vision impaired.
Button design tips
Based on the button design mistakes above, here are some quick and practical button design tips to keep in mind to design user-friendly and accessible buttons:
Buttons should have a clear visual hierarchy that doesnât rely on colour alone.
Contrast ratio of the button shape must be at least 3:1 to ensure people can identify it as an actionable element.
Button text contrast ratio must be at least 4.5:1 to meet WCAG 2.0 level AA accessibility requirements.
If buttons are identical styles, the contrast ratio between buttons must be at least 3:1 to ensure the vision impaired can distinguish between them.
Use a large touch target (at least 48pt) to ensure people can easily tap buttons.
Make sure thereâs sufficient space between buttons so people donât mistakenly tap the wrong button. I usually use 16pt to be safe.
A suggestion for better buttons
I suggest using the following button styles as theyâre very familiar, accessible, and have a clear visual hierarchy that isnât dependent on colour alone.
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. 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.
In the below hero banner example, important call to action links are made to look like buttons to make them more prominent and create a clearer visual hierarchy.
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.
Iâm not saying that these button designs are 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 thoughts or feedback via Twitter.
Learn more practical UI design tips
This is just 1 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.
Archive for the ‘UI Design’ Category:
Top 10 free typefaces for UI design
By Adham Dannaway on June 13, 2023
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 volumeRadio buttons volume controlJump higher to increase the volumeShoot the appropriate arrow to increase or decrease the volumeKeep tapping to increase the volumeWind up that volumeLatitude based volumePump up that volumeMicrophone based volumeControl the volume via an electrical circuitHeat up the volume by adding wood to the fireColour in to increase the volumeBeat a dead horse to increase the volumePlay snakes to set the volumeCalculate the volumePlay pong to set the volumeTilt to control the volumeRoll 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.