# 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. 

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. 

{% 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 the 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://www.printfriendly.com/blog/all-about-fonts-and-typography-in-printing-and-website-creation>" %}

{% 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="/pages/-LwCYwSPISDtxU5B2vOJ" %}
[Fonts](/more/free-resources/fonts.md)
{% 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="/pages/-LwCZv3I1YS3ZrVPKWgH" %}
[Icons](/more/free-resources/icons.md)
{% endcontent-ref %}

![](/files/-LyTzMN_2df8kzPj8tGD)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.uxlibrary.org/explore/ui-design/articles/color-typography-and-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.