---
description: >-
  Learn more about the influence of color, typography & icons from the list of
  articles we have curated for you.
---

# Color, Typography, & Icons

When we start a project usually the first step is a challenging hurdle of deciding what colors, fonts, and icons to use. After all you didn't really pay attention to that during the low-fidelity design stage and thank god you didn't. But now you need to.&#x20;

However the bigger challenge is learning how to use these colors, fonts, and icons well and below are the best articles which discuss the best practices for this. We highly recommend reading these articles as they will transform the way you create user interfaces in the future.

## Color

Using color responsibly is an art which takes time to master for many. These articles will help accelerate that process by teaching you established industry strategies to using color effectively in UI.&#x20;

{% embed url="https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e" %}

{% embed url="https://www.canva.com/colors/color-meanings/" %}

{% embed url="https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/?ref=webdesignernews.com" %}

{% embed url="https://tubikstudio.com/light-or-dark-ui-tips-choose-proper-color-scheme/" %}

{% embed url="https://medium.com/bymds/color-contrast-crash-course-for-interface-design-a69c987abe1b?" %}

{% embed url="https://www.invisionapp.com/inside-design/color-user-experience/" %}

{% embed url="https://uxplanet.org/7-tips-to-organize-colors-for-ui-design-97bbefed8a8a" %}

## Typography

Making a headline and paragraph legible and easy to read isn't as easy as it seems with many websites and interfaces still not getting it right. In these articles below you will learn the formula behind getting your font sizing, line spacing, line length, and font weight choices right.

{% embed url="https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f" %}

{% embed url="https://css-tricks.com/equilateral-triangle-perfect-paragraph/" %}

{% embed url="https://css-tricks.com/six-tips-for-better-web-typography/?ref=webdesignernews.com" %}

{% embed url="https://uxdesign.cc/how-to-make-the-typography-of-your-ios-app-not-suck-a6de09fb7c41" %}

{% embed url="https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/" %}

{% embed url="https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/" %}

#### **Also explore our Free Font Resources**

{% content-ref url="../../../more/free-resources/fonts" %}
[fonts](../../../more/free-resources/fonts)
{% endcontent-ref %}

## Icons

{% embed url="https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/" %}

{% embed url="https://www.intechnic.com/blog/icon-usability-best-ux-tips-and-design-guidelines/" %}

{% embed url="https://careerfoundry.com/en/blog/ui-design/icon-design-process/" %}

{% embed url="https://medium.com/@uxmovement/solid-vs-outline-icons-which-are-faster-to-recognize-9bb0fc24821f" %}

#### Also explore our Free Icon Resources

{% content-ref url="../../../more/free-resources/icons" %}
[icons](../../../more/free-resources/icons)
{% endcontent-ref %}

![](https://4049242671-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXimC0bwl-iiW3Q7dFD%2F-LyTzBO9bfs7Jhqr4Q4d%2F-LyTzMN_2df8kzPj8tGD%2FBookmark.png?alt=media\&token=51723bee-09ec-4b36-8f46-b42c757a050f)
