> For the complete documentation index, see [llms.txt](https://www.uxlibrary.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.uxlibrary.org/explore/ui-design/articles/color-typography-and-icons.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.