# UI design: typography and colour fundamentals **Date de l'événement :** 17/10/2024 * Publié le 17/10/2024 ### Auteur **[Andrew Tipp](https://weare.my-memory.io/structure/andrew-tipp_eGfMunU2ZCQPVq8xRMDr)** ### Galerie Photos ![1.jpg](https://firebasestorage.googleapis.com/v0/b/memory-weare.firebasestorage.app/o/prod%2FC0FkXRl4r8eWmsTwdW9X%2FprojectsMedias%2F3vl77Di5WbDCAhsbwL8I%2Fthumbs%2F1_1600x900.png?alt=media&token=721baab0-acef-4bec-a29b-fbc5a6cacd3f) ## Description #### Why fonts and colours matter — and how to use them. ![A hero component featuring a woman drinking coffee and the words ‘You’re just my type’ and sub-title ‘A font of design knowledge’ above a button that says ‘Start reading’.](https://cdn-images-1.medium.com/max/1024/1*Vpa8ZJK9ig_jige_7xVVTQ.png) A hero component featuring the Outfit typeface in striking yellow > The featured image for this article is based on [Project Caffeine](https://www.figma.com/proto/5BlywwxRUJ3aJKCIscEdwj/Project-Caffeine?node-id=29-124&t=0hsXcziXDwnz6aHF-1) — one of my earliest ever Figma (desktop) prototypes, for the fictional coffee website ‘Bean Bros.’ ### Introduction Our lives are shaped by typography and colour, from billboards to book covers; film posters to food adverts. And it’s no different when it comes content and user experience (UX) design. > The typography and colour palettes used in digital products and systems affect our emotions, behaviour and decision-making. In fact, the design choices around typeface and colour for websites, mobile apps, mixed reality or wearable technologies can be the difference between a seamless, satisfying experience or frustration and exclusion that ruins our day. So whether you’re an aspiring product designer, veteran content designer, digital marketer or anyone else responsible online information, you need to know some basics in these areas. > The first part of this article covers typography. The second tackles colour palettes. The final section looks at how to apply both to UX design in practice. ### Typography Typography is a 500-year old art form. Applying typefaces to digital user interfaces (UI) is simply the latest chapter in a long story. As designers, we stand on the shoulders of giants when it comes to type. Let’s start with a definition. #### What is typography? > Typography is the practice of arranging letters and text in a way that makes user interface content recognisable, legible and visually engaging. The terms **typeface** and **font** are often used interchangeably — but there _is_ a difference between them: the former represents an entire family of fonts; the latter refers to the weights, widths and styles _within_ that family. ![An explanation of how typefaces are different from fonts](https://cdn-images-1.medium.com/max/1024/1*QMeK56cFuDlzoRw7_Sdesg.png) Typeface versus Font (Hannah, 2023) #### Why is typography important in design? There are lots of reasons why type matters, including: * **Branding** — the right typeface supports your tone of voice, and using recognisable fonts everywhere users/customers interact with your company ensures consistency and trust. * **Usability** — clear, legible typography helps users quickly and easily learn about products and services they want or need to access. If people can’t read this information they’ll go to a competitor, or simply give up. * **Inclusion** — typography choices that aren’t accessible or culturally appropriate risks excluding people with disabilities or other access needs. Typography theory runs pretty deep — check out the diagram below, which matches a hierarchy of user needs in UX and interface design with typography properties: ![A comparison of user needs and typographic properties](https://cdn-images-1.medium.com/max/1024/1*mHU3WqPmLMoguGOAtEKchQ.png) Connecting user needs and typographic properties in UX (Dick and Woloszyn, 2023) #### What typography options are there? You basically have four main varieties of typeface to choose from: 1. **Serif** — a classic style traditionally found in books, newspapers and print magazines. Serif typefaces convey a literary, high-brow quality. Examples: Times New Roman, Merriweather. 2. **Sans serif** — clean, simple typefaces often used for websites and mobile apps to convey a neutral, minimal and contemporary feel. _Rounded_ variations have a fun, playful feel; _light_ versions convey chic and luxury. Examples: Arial, Roboto. 3. **Decorative fonts** — typically used for logos and titles to reflect the vibe of the product or service, and intended to be aesthetically interesting rather than highly readable. Examples: Cooper Black, Lobster. 4. **Script fonts** — typefaces designed to look like handwriting. _Casual_ script conveys a personal, handmade quality; _formal_ script conveys formality and elegance. Examples: Pacifico, Caveat. The differences between these options is illustrated below: ![A visualisation of serif, sans serif, decorative and script typeface.](https://cdn-images-1.medium.com/max/1024/1*o2-WnGCKLVaWjj5MSRjpEQ.png) Serif, Sans serif, Script and Decorative typefaces (Villemaire, no date) > You can use websites like [Google Fonts](https://fonts.google.com/) to play around with how your content might look using different typefaces. #### Tips for using typography Here are some good practices for designing with typeface: * **Choose a typeface that reflects your brand** — users associate certain fonts with specific industries and types of products. Some people may even associate a font with price, quality and brand values. Follow [Jackob’s Law](https://lawsofux.com/jakobs-law/) and choose a typeface users might expect based on their experiences of similar websites. * **Use sans serif typefaces by default —** there’s not much difference in readability for most people between serif and sans serif, but for children, older people and those with low vision or dyslexia the cleaner sans serif is [easier to scan, read and interact with](https://geniusee.com/single-blog/font-readability-research-famous-designers-vs-scientists). * **Remember the design principle ‘form follows function’** — the typography you choose should reflect the purpose of your product. For example, [GOV.UK](https://www.gov.uk/) uses a _sans serif_ font because users want to quickly use accessible services then leave the website; [The Atlantic](https://www.theatlantic.com/) uses a _serif_ font because users want to settle in for a long-form, magazine reading experience. ![Comparison of the typefaces on GOV.UK versus The Atlantic](https://cdn-images-1.medium.com/max/1024/1*I_kJIAQMKz0ojWST48Wk0g.png) GOV.UK and The Atlantic websites * **Test your typography with users / customers** — it’s useful to know how users feel about your product’s typography, and whether it affects their experience or actions. There are lots of [ways to do UX research](https://medium.com/design-bootcamp/the-ux-research-methods-playbook-part-1-fc0a8a43e755) related to your branding and typography, from _desirability studies_ and _focus groups_ which elicit qualitative insights to _A/B testing_ and _eye-tracking_ for analysing quantitative data. * **Consider allowing users to customise their experience** — this could include using built-in features, accessibility overlays or ensuring users can use their own assistive technology to personalise your product’s typography, e.g. increasing text size or changing to a font such as [Dyslexie](https://dyslexiefont.com/en/) which may help dyslexic readers. ### Colour The use of colour to evoke emotions is an even older art form than typography, going right back to the ancient Greeks, Egyptians and Chinese. But how is it applied to modern UX design? Again, let’s start with a definition. #### What is a colour palette? > A colour palette is a combination of colours used by designers to create an accessible, engaging interface, often as part of a coherent design system. Colour palettes are based on [colour theory](https://www.colormatters.com/color-and-design/basic-color-theory). However, we’re not going down that rabbit hole right now; we’re focusing on the practical aspect of creating a basic colour palette in UI design. The internet is awash with inspiration for colour palettes. For example, the combinations below, each of which could work for a different type of digital product. ![Different colour combinations from Figma.](https://cdn-images-1.medium.com/max/1024/1*5K2dewsYhBfZMuh4RxZnHw.png) [Colour combination inspiration](https://www.figma.com/resource-library/color-combinations/) from Figma > You can use tools like [Coolors](https://coolors.co/) and [Canva](https://www.canva.com/colors/color-palette-generator/) to generate or explore trending colour palettes. #### Why is colour important in design? There are a lot of factors, including: * **Branding** — using consistent, recognisable and distinctive colours for your company or organisation helps you stand out, and aligns to the usability heuristic [recognition over recall](https://www.nngroup.com/articles/recognition-and-recall/). * **Usability** — a well designed colour palette helps make your interfaces quicker and easier to use. For example, it helps users identify your menus, links and other _affordances_ — supporting the design principle of [discoverability](https://www.interaction-design.org/literature/topics/discoverability) (users knowing what actions are possible). * **Accessibility** — strong contrast between foreground and background elements helps everyone, but especially people with [low vision](https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/low-vision). Depending on your location, you may also be legally obligated to comply with web accessibility regulations. * **Conversions** — finding the optimal colour for UI elements such as call-to-action (CTA) buttons can increase conversion rates. You can experiment with [A/B testing software tools](https://www.hotjar.com/ab-testing/tools/) to find the variation that results in the most click-throughs. * **Emotions —** users associate individual colours with certain emotions and moods. That means designer choices over colour combinations can influence how people _feel_ when using a product or system, affecting their entire experience of interacting with a brand (see below). ![Colour meanings explained in table.](https://cdn-images-1.medium.com/max/1024/1*WUcCmqtpNkKrEck8CP5hFQ.png) Colour and emotional meaning (Ismail, Ramli and Rozzani, 2021) > Remember: different studies into colour meaning produce different results. There’s a rough consensus, but the emotional meaning of colours is not ‘solved’, and likely never will be as colour associations change over time. #### What types of colour palettes are there? Different colour palette systems include: 1. **Monochromatic** — a simple and popular option, where the palette is formed from different tones and shades of a _single_ colour. 2. **Analogous** — a more complex palette system formed of _three_ colours located next to each other on the colour wheel. 3. **Complementary** — perhaps counter-intuitively, complimentary colour palettes are formed of colours _opposite_ each other on the colour wheel (to achieve a strong contrast effect). 4. **Triadic** — this palette approach is based on three different colours that are _equidistant_ to each other on the colour wheel. Typically, designers choose one _dominant_ colour and the other two as _accent_ colours. ![Visualisation of different types of colour palettes.](https://cdn-images-1.medium.com/max/764/1*QhkJ6XLATl-G_4TQAgOTLg.png) Four colour palette types (Hannah, 2023) #### Tips for designing colour palettes Here are some good practices to follow: * **Start by doing your research** — find out which colours might evoke the mood or emotions your product / service is aiming for. Learn what colour conventions exist for similar products in your industry. (Following established industry conventions adheres to the usability heuristic [consistency and standards](https://www.nngroup.com/articles/consistency-and-standards/).) * **Consider sticking to a single brand colour** — some of the world’s biggest tech companies, including Facebook, Airbnb and Spotify, have colour palettes based on a single brand colour. This colour is then used as primary interactive element (button). Keeping things simple like this avoids over complicating the UI, reducing [cognitive load](https://lawsofux.com/cognitive-load/). ![Visualisation of different brands using a single brand colour.](https://cdn-images-1.medium.com/max/1024/1*yodUmPj-Idxs6q1Wt26JTg.png) Facebook, Airbnb and Spotify colour palettes (Dannaway, 2024) * **Consider a monochromatic palette** — opting for a palette based on variations of the same colour can create a cohesive look, simplify the interface and convey a strong brand presence. [Monochromatic palettes](https://www.canva.com/learn/monochromatic-colors/) are created using the HSB colour system, using the _same_ hue for each colour but _adjusting_ the saturation and brightness (we’ll get into this in the last section). * **Ensure your colour system is accessible** — the Web Content Accessibility Guidelines (WCAG) [requires a colour contrast ratio](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) of at least 4.5:1 for normal text and 3:1 for large text. You can use tools like the [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) to see if your colours are compliant. However, it’s worth bearing in mind that current WCAG contrast standards are _not_ perfect (see below), and will be changed to the [Accessible Perceptual Contrast Algorithm](https://ruitina.com/apca-accessible-colour-contrast/) (APCA) in version 3. ![Comparison of WCAG versus APCA colour contrast.](https://cdn-images-1.medium.com/max/1010/1*Yh8K6RtyLxaJauJ0LW9rdg.png) WCAG v APCA colour contrast example (Dannaway, 2024) * **Test with your users** — it’s important to test your colour combinations with representative users to ensure you’re [_designing inclusively_](https://www.nngroup.com/articles/inclusive-design/). Colours can have [different meanings in different cultures](https://medium.com/design-bootcamp/color-psychology-in-ux-b371fde795d3). For example, in Europe white is associated with weddings, but in China it’s related to funerals and death. These cultural differences (see below) may affect whether you pursue a [_universal design_](https://www.washington.edu/doit/what-difference-between-accessible-usable-and-universal-design) for you product or adapt it or different markets. ![Colour meaning across different cultures.](https://cdn-images-1.medium.com/max/1024/1*PY5JtJ-GXPvRgjAVUN3iyQ.png) Colour meanings across cultures (Mall, 2020) * **Remember you can’t please everyone** — no matter how much colour theory you study or cultural variations you learn about, keep in mind every user is unique; everyone — especially project stakeholders — will have their own preferences and _there’s no combination of colours that will make everyone happy_. ### Typography and colour in practice I often find concepts are best illustrated by working through examples. So let’s apply this to some UX design in practice. Below is a prototype I’ve designed for a fictional job recruitment website, focusing on the mobile experience. Let’s call the website ‘Blue Leaf’. ![Home and search screens for ‘Blue Leaf’ jobs site.](https://cdn-images-1.medium.com/max/803/1*xaR_EKRl7PybCiaz-YOncg.png) Prototype screens for ‘Blue Leaf’ jobs website #### Typography I’ve chosen [Plus Jakarta Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans/about) for my prototype, as it’s a clear, modern and highly legible typeface. Personally, I’m a big fan of clean, simple and bold type, and I think this one works well for Blue Leaf. Next, I’ve set different Plus Jakarta Sans font styles for the various headings and body text, sticking to **Bold** and **Regular** for simplicity: ![Typeface heading and text styles laid out in a table.](https://cdn-images-1.medium.com/max/676/1*xe2Gttka9I54tvd0ELokaQ.png) Creating my heading and body text styles Finally, I’ve set these font styles in the design file of my prototyping tool (Figma): ![Showing how typeface settings are added to Figma.](https://cdn-images-1.medium.com/max/1024/1*N_UW93qBz8Z-lxxjQHBDOQ.png) Setting font styles in Figma Now I’ve created my font settings, I can create _components_ and _variants_ using my pre-set typography styles. This makes designing quicker, ensures consistency, and if I want to make changes I can do it at settings level — I don’t have to change every screen individually. ![How to select text styles for components.](https://cdn-images-1.medium.com/max/1024/1*2KfaRGNbAymSdu0EFiVAGQ.png) Selecting a typography style for component text #### Colours I’ve decided to keep things simple: I’ve gone for a **single** brand colour, which I’ll use for the primary interactive element (CTA button) in the UI. I’ve chosen a shade of blue as my brand colour. It looks professional, and should feel familiar to LinkedIn job hunters. Hopefully it conveys _trust_, _calm_ and _peace of mind (_and doesn’t evoke feelings of sadness or depression!) I’m also using a **monochromatic** palette. Here’s the overview: ![Blue Leaf colour palette showing six colours.](https://cdn-images-1.medium.com/max/1024/1*tU2CvUo2RR_FxYuzT7nyTQ.png) The monochromatic colour palette for Blue Leaf What do these labels mean? Here’s the breakdown: * **Brand**: interactive elements (like text links and buttons). * **Text strong**: primary text (headings, body content) and form labels. * **Text weak**: supporting text (so it’s less prominent). * **Stroke strong**: non-decorative borders on interface elements like form input fields, and also icons. * **Stroke weak**: decorative borders, like dividing lines, that aren’t critical to identifying UI elements. * **Fill**: secondary backgrounds. These six colours are complemented by a plain white background. Below I’ve identified which labels relate to different UI elements in practice: ![Visualisation of what different colour styles mean on the interface.](https://cdn-images-1.medium.com/max/1024/1*eWmKm4OqR7LvUwfwvhT4Cg.png) How the Blue Leaf colour palette is used in the UI Similar to the typography, I’ve set my colour palette values in my design file and given them all labels: ![Explanation of how to customise colours.](https://cdn-images-1.medium.com/max/1024/1*e4fs3mVKFwBX5kU8LjRfjQ.png) Setting colour values in Figma I can now apply pre-set colour styles to different interface elements. For example, I’m able to make the primary interactive button component Blue Leaf’s brand colour: ![Applying pre-set colours to the interface.](https://cdn-images-1.medium.com/max/1024/1*xtD0hKlJfZeyXWX8ryHGRQ.png) Setting the primary button Blue Leaf brand blue Your [design system](https://www.figma.com/blog/design-systems-101-what-is-a-design-system/) in Figma or any other protyping tool should clearly document your colour palette. I’ve laid out Blue Leaf’s palette below — notice the monochromatic technique of consistent _Hue_ (except ‘Background’) but adjusting the _Saturation_ and _Brightness._ ![Documented colour palette as part of a design system.](https://cdn-images-1.medium.com/max/535/1*Sdlq-8NPC3_LwjiemZVI4w.png) Colour palette design system documentation I can see that my colour contrast isn’t perfect for some instances, and fails WCAG level AAA compliance. But it passes level AA in this case which is acceptable: ![Colour contrast checking.](https://cdn-images-1.medium.com/max/864/1*1AcJoYLv-g8y_EMK2jgTeQ.png) Checking colour contrast using the WebAIM tool ### Summary Hopefully this article helps explain the basics of how to approach typography and colour in UX/UI design, including: * what typography and colour palettes are * why they’re important in design * different typeface and colour palette categories * best practice tips for design * how to apply all this in practice ### Recommendation I’ve used a lot of sources for this article, but one I want to draw special attention to is [Practical UI](https://www.practical-ui.com/) by Adham Dannaway. It’s the best book I’ve read about designing interfaces following usability principles, accessibility standards and UI best practices. It’s beautifully crafted, clear and concise. Most of the practical application content in this article is based on Practical UI’s chapters on typography and colour, but I’ve still only scratched the surface. There’s so much more amazing detail in the book, and I cannot recommend it highly enough. You should buy it. Right now. ### Sources Cui, M., Zheng, C., Shi, W. and Wang, Z. (2023) ‘Research of the typography design for digital reading on mobile devices’, _Ergonomics in Design_, 77, pp. 110–121. Dannaway, A. (2024) _Practical UI_. Available at: [https://www.practical-ui.com/](https://www.practical-ui.com/) Dick, M. E. K., and Woloszyn, M. (2023) ‘Influence of typographic properties on user experience in digital interfaces’, _Estudos Em Design_, _31_(2). Available at: [https://doi.org/10.35522/eed.v31i2.1711](https://doi.org/10.35522/eed.v31i2.1711) Garfield, S. (2011) _Just my type: a book about fonts._ 1st edn. Gotham. Hannah, J. (2023) _Typography: What is it? The complete guide for 2024_. Available at: [https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/) (Accessed: 16 October 2024). Hannah, J. (2023) _Color theory and color palettes — a complete guide._ Available at: [https://careerfoundry.com/en/blog/ui-design/introduction-to-color-theory-and-color-palettes](https://careerfoundry.com/en/blog/ui-design/introduction-to-color-theory-and-color-palettes/#introduction-to-color-palettes) (Accessed: 16 October 2024). Ismail, U. U., Ramli, R., and Rozzani, N. (2021) ‘User experience / user interface (UX/UI) design for autistic spectrum disorder (ASD) color based emotion detection system: a review’, _2021 IEEE International Conference on Automatic Control & Intelligent Systems (I2CACIS)_, pp. 114–119, Available at: [https://doi.org/10.1109/I2CACIS52118.2021.9495855](https://doi.org/10.1109/I2CACIS52118.2021.9495855) Koroveshi, P. (2023) _The impact of colour psychology in user experience._ Available at: [https://www.theseus.fi/bitstream/handle/10024/820815/Koroveshi\_Pavlo.pdf](https://www.theseus.fi/bitstream/handle/10024/820815/Koroveshi_Pavlo.pdf) (Accessed: 16 October 2024). Sawyer, B. D., Wolfe, B., Dobres, J., Chahine, N., Mehler, B., and Reimer, B. (2020) ‘Glanceable, legible typography over complex backgrounds’, _Ergonomics_, _63_(7), pp. 864–883. Available at: [https://doi.org/10.1080/00140139.2020.1758348](https://doi.org/10.1080/00140139.2020.1758348) Stadler, A. (2022) _How psychology can be used to influence user behaviour in UI and UX design_. Available at: [https://www.theseus.fi/handle/10024/751168](https://urn.fi/URN:NBN:fi:amk-2022052912966) (Accessed: 16 October 2024). User Testing (2019) _How color impacts conversion rates and UX._ Available at: [https://www.usertesting.com/blog/color-ux-conversion-rates](https://www.usertesting.com/blog/color-ux-conversion-rates) (Accessed: 16 October 2024). Villemaire, S. (No date) _Everything you need to know about fonts_. Available at: [https://www.canva.com/learn/everything-you-need-to-know-about-fonts/](https://www.canva.com/learn/everything-you-need-to-know-about-fonts/) (Accessed: 16 October 2024). ![](https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b3bdf091b096) * * * [UI design: typography and colour fundamentals](https://medium.com/design-bootcamp/ui-design-typography-and-colour-fundamentals-b3bdf091b096) was originally published in [Bootcamp](https://medium.com/design-bootcamp) on Medium, where people are continuing the conversation by highlighting and responding to this story. ### Date 17/10/2024 **Source :** [https://medium.com/design-bootcamp/ui-design-typography-and-colour-fundamentals-b3bdf091b096?source=rss-42e577ae5b66------2](https://medium.com/design-bootcamp/ui-design-typography-and-colour-fundamentals-b3bdf091b096?source=rss-42e577ae5b66------2) ### Mots-clés `#user-experience` `#ux` `#ui-design` `#product-design` `#ux-design` ### Provider **[Medium](https://weare.my-memory.io/structure/medium_jUiQJbFlPHhi9kQC9Lv7)** --- ### Navigation pour IA - [Index de tous les contenus](https://weare.my-memory.io/llms.txt) - [Plan du site (Sitemap)](https://weare.my-memory.io/sitemap.xml) - [Retour à l'accueil](https://weare.my-memory.io/)