1. Don’t Use More than Two Typefaces
Fonts are the files on the device, that are later used to render the typeface. Developers sometimes add too many typefaces to their products and end up making it an overwhelming result. You should use only two typefaces maximum. One for heading and titles, and another for body copy that is the content to be read by users.
However, you can use weights and italics within that font family for any further customization of your style, adding too many typefaces creates too much visual noise and increase the effort that they have to put into understanding the view in front of them.
Points to Remember
Use a maximum of two typefaces.
Use one typeface for heading and titles, and another for body copy.
2. Use System Native Fonts
There are times when developers are required to use their product/brand font, but that different font takes more time to load on pages, as it needs to be downloaded from the server and renders which results in empty pages until everything loads up.
These fonts have to be loaded from somewhere, whether it’s Google Fonts, Typekit, or your CDN, which means that there is a barrier in getting the font files down to the user’s machine. Also, different devices out there will make your page look a little different for everyone. This is why it is recommended to use system native fonts that make pages appear quicker and the type look sharper and appealing to read.
Points to Remember
Use system-native fonts that users already have installed.
System fonts will typically render better than custom fonts.
Recommended system font stack
apple-system.
BlinkMacSystemFont.
sans-serif.
Oxygen-Sans.
Helvetica Neue.
Cantarell.
3. Depict Information Hierarchy With Type Size
There are times when you want to keep things effective while managing your views and making them instantly understandable for a wide range of users.
For example, let's say in your application, a pop-up reminds users about their meetings, and if we use the same Type Size for all the content, it loses the hierarchy of what matters the most to users when they are looking at the view.
Points to Remember
Scale up the information that you want the user to observe first.
Use at least two and not more than three type sizes.
Find a balance between the type sizes and don't overdo it.
4. Use Consistent Icons
There are times when developers get confused with multiple icons set available out there, and later they realize that it didn't have an icon for a particular action for their product. Using consistent icons is very important as the user has to put extra effort to recognize the whole UI.
Points to Remember
Don't take a shortcut by adding disparate icons.
Try to build a coherent icon style.
Read More at: https://javascript.plainenglish.io/8-ux-principles-you-should-know-as-a-frontend-developer-9416a24294d2
Top comments (1)
Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.
If you choose to do so, you also have the option to add a canonical URL directly to your post.
Some comments have been hidden by the post's author - find out more