UX & UI design tips n tricks to help your small web dev firm cut development costs, keep on-scope, and make beautiful interfaces.
📰 in today's episode
rhythm and contrast
|
Hey ,
Most digital interfaces are primarily text. The words of our UIs are so important as they are doing almost all of the work of conveying actual information to the user. In fact, you should be able to strip out the styling of a well-designed interface, leaving just the
words and the space around them, and still be able to have a good idea of what is going on.
So it follows that one of the most effective ways to improve the user experience is by working on the typography.
Here are 5 quick tips to help you elevate the interface designs on your next job.
|
Fonts are fun. There are so many great ones out there to try. But most interfaces will benefit from having just 1 to 3 different fonts, max. And great care should be taken to make sure that all of the fonts chosen
work well together.
More than three and your interface will start to look messy and inconsistent, distracting the user from the actual information and words.
|
When working with big chunks of text, try to keep the line length between 45 to 75 characters. 66 characters in length is considered to be the sweet spot for improved readability.
The reason is that as our eyes scan the text from line to line, we can easily lose our place if the line is too long. You have probably done something like follow a line of text with your finger in a book, or highlight the line of text you are reading with your mouse so that you don't lose your place. Shorten those lines so your users don't have to resort to such
methods.
|
A type-scale is a mathematical method for defining a harmonious and rhythmic set of font sizes for your
UI.
You start with a base font size (your body copy), say 18px, and then multiply or divide it by a scale factor to get font sizes larger or smaller in your hierarchy (such as H1, H2, H3 etc.). A common scale factor is 1.25.
This removes the guesswork on your part and makes sure that all font sizes are related to each other. The visual result is one of harmony and consistency.
|
4. Increase font-size for long-form text
|
This is a simple and effective way to improve the readability of long pieces of text in your interfaces
(articles, posts, legal text etc.).
Instead of sticking with the "industry norms" of 16px or 18px for body text on the web, try pushing it up to 20px. It will reduce eye strain of the user, and they will subconsciously thank you for it.
It does depend on the font you have chosen, so make sure you test it before applying it blindly.
|
Increase the dynamism of your UIs by utilizing type contrast to your advantage. Huge headline next to
small text. Extremely heavy font weight, next to razor thin.
This kind of contrast can add drama and artistic flair to a layout. It can pull the viewer in, exciting them about the content.
But always make sure that you aren't compromising the readability of the text.
|
Each week I recommend one useful tool or resource that you could use to help your team save time and make better interfaces.
Typewolf
Typewolf is a great resource for anyone who has to regularly choose fonts for websites or apps. It's a resource site curated by designer, Jeremiah Shoaf. The most common use of the site is to find good font pairings. So if you know you want to use Proxima Nova for your headings, head over to Typewolf, search Proxima Nova, and see what fonts he recommends you use for the body
text. There are also plenty of inspiring examples of typography around the web, as well as a number of paid products and services.
|
Thanks for reading! Any thoughts or questions? Hit reply and I'll get back to you as soon as I can.
Brent
|
Who the heck am I?
My name is Brent Halverson Nygaard, and I am a UI & UX design professional.
Want to learn more about me? Visit my informative internet website.
If you know someone who might find this interesting, please forward this mail to them!
Got this mail from a friend? You can sign up here to receive future issues.
|
|
|
