
## A subject for confusion

When it comes to working with text on the web and mobile apps, there are many things to untangle — like unclear terms, unwritten rules, and technical details. Questions I often ask or hear others in the industry repeating include:

- Are font and typeface the same thing?
- What is the optimal font size for body text on a desktop versus a mobile device?
- What are the best practices for line height and letter spacing?
- How should text adjust when a user zooms in and out of their browser?
- And, by the way, what exactly is the difference between zooming in on a browser and adjusting the root font size on a laptop?

My goal for this article is to enhance my understanding of these topics, and, by documenting the journey, create an overview that can serve as a reference whenever any of the above questions - or others - arise.

## To begin with

Lets start by getting a hang of these different terms: typography, typeface, font and font-style.
**Typography** is defined as the style and appearance of text in published form. It is the umbrella including typeface, fonts, text size as well as spacing of lines, letters and words. It is an art form that dates back to the 11th century and it was originally studied for its use in printed material such as newspapers and books.

### Typefaces and fonts

As for typeface and font: I find I'm constantly confused by these terms, and it does not make it easier that they are used interchangeably by many people in the industry. The fact is that they explain different aspects of typography. [source](https://typetype.org/blog/font-and-typeface-what-s-the-difference/)

A font is a character set: a specific visual design of letters, numbers, and symbols used in writing or typing. Simply put it determines how text looks when you see it on a screen or printed page. While a typeface, also referred to as a font-family is a _family of related fonts_ that differ in attributes like width, weight and possibly different styles. For example Montserrat is a typeface and the variations of light, regular and bold are fonts.

![Image example of a type and a couple of fonts](/images/blogs/exploring-web-and-app-typography/type-vs-font.png)

To make it just a bit more confusing, typefaces can be categorized into main types as well, with the most used ones being serif and sans-serif. (But there are more to explore for any one interested in diving deeper in this area.) Serifs are the small features at the end of strokes within letters, while letters without serifs are referred to as sans-serif. In the below example I’m using Roboto-serif as the serif representation and Roboto as the sans-serif representation.

![Image example of a serif and a sans-serif type font](/images/blogs/exploring-web-and-app-typography/typeface_categories.png)

## WCAG text guidelines

Now we have some of the base terminology down, lets move on to the topic of responsiveness. I chose to read about what the **Web Content Accessibility Guidelines (WCAG)** had to say about this, often overlooked aspect within UX design and web development.

### Resize Text (Level AA), Success Criterion 1.4.4

WCAG has recommendations about text resizing to ensure that visually rendered text can be successfully scaled, allowing people with mild visual impairments to read without assistive technology. Stating that your text content satisfies the criterion if it can be scaled up to 200%.

From the perspective of a front-end developer building a website, it is primarily the browser's responsibility to provide the functionality for scaling text and content. But the developer also plays a crucial role, specifically developers should:

- ensure that their **web content does not prevent browsers from** effectively **scaling text** and content.
- verify that their **content supports text resizing**, ensuring usability when text size changes.
- in case the browser does not support zoom functionality, developers must provide this functionality directly. Alternatively they should **ensure that the content works with the available functionality**.

So what does this look like in practice? An example could be a user with a vision impairment increasing the web page text size in a browser from 1em to 1.2em to improve readability. Or a user utilizing the zoom function in the browser to scale up the content, with all the content scaling uniformly as the browser provides scroll bars if necessary. WCAG gives some recommendations on how to achieve this: ensure that text containers resize with the text, and use relative measurements like percentages, em units, or named font sizes. Here is an example of how this looks on FrontendMasters website. See how the different techniques affect the web site, and how the second option using zoom, is also scaling the containers with the font size.

The site in 100% zoom

![Frontend masters website with default settings.](/images/blogs/exploring-web-and-app-typography/frontend-masters.png)

Changing the web page text size from medium to very large.

![Frontend masters website with browser text setting large.](/images/blogs/exploring-web-and-app-typography/frontend-masters-web-text-large.png)

Changing the web text size back to medium and using the zoom function in the browser to scale up the content from 100% to 150%.

![Frontend masters website with zoom 150%.](/images/blogs/exploring-web-and-app-typography/frontend-masters-zoom-150.png)

For each technique WCAG recommend to meet their success criterion, they have detailed documentation, including how to test it after implementation. This is, for me, an underused resource that I will be using more frequently going forward.

## Recommended font size and font style

Moving on from accessibility considerations to more decorative aspects of typography. Where do we start when choosing our fonts?

### Choosing typeface

The first step in choosing a font is selecting your typeface. Styles should be clean, simple, and not too decorative. In general the ticks and tails of serif fonts for example, take up more space on the screen. Some examples of typefaces that are optimal for readability even for users without visual impairments are _Times New Roman, Verdana, Arial, Tahoma, Helvetica,_ and _Calibri_. For website and app creators who want to take this to the next level, there are fonts created with people with dyslexia in mind: [Read Regular](http://www.readregular.com/english/regular.html), [Lexie Readable](http://www.k-type.com/fonts/lexie-readable/), and [Tiresias](https://www.fontsquirrel.com/fonts/tiresias-infofont).

Accessible typefaces from Windows Accessible typefaces from Google fonts

![Example of accessible typefaces](/images/blogs/exploring-web-and-app-typography/accessible-typefaces.png)

### Choosing font

Now that we have chosen our typeface, it's time to focus on the fonts. Arguably the most important factor in making a font accessible is how readable it is to all users.

There are four typographic characteristics that directly impact the readability of a font: font weight, character spacing, x-height, and line height. What looks good on a desktop might translate differently to smaller mobile devices, so keep in mind to test typography adjustments across various devices. [source](https://www.accessibilitychecking.com/blog/fonts-accessibility/)

**Font weight**

Font weight impacts how light or dark we perceive text. A bold text looks darker, and if too dark it can become unreadable. Light fonts are generally more readable because of there cleaner and less chunky style. But if the perception of the text is very light we can experience dropouts.

![Example of different font weights](/images/blogs/exploring-web-and-app-typography/font-weight.png)

**Character spacing**

Character- or letter spacing, has the power to enhance the visual balance of a font. Avoid overly tight or overly loose spacing, as both can hinder readability. The optimal spacing can differ between font sizes. A smaller text under 16px can benefit from a slight increase in the character spacing, while a larger text such as a headline might be more readable with less spacing.
[source](https://www.figma.com/dictionary/letter-spacing/)

Additionally, letter spacing plays a crucial role in accessibility. Research indicates that wider spacing can improve reading comprehension and speed, particularly for individuals with dyslexia. Following guidelines from organizations like the World Wide Web Consortium (W3C), which recommend a letter spacing of at least 0.12 times the font size, helps ensure that digital content remains accessible to a broader range of users. [source](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html)

Notice how the bigger letter spacing works well for the body text, but is too wide for the header.

![Good and bad practice examples of character/letter spacing](/images/blogs/exploring-web-and-app-typography/character-spacing.png)

**Line height**

Line height also called lead, from the traditional use of metal type, where the strips of lead were inserted between each row to give space between them. If line-height is used is used in the right way it can improve readability by preventing lines from feeling cramped. A guide line is somewhere between 1.4 to 1.8 times the font size. [source](https://elementor.com/blog/web-safe-fonts/)

![Good and bad practice examples og line height](/images/blogs/exploring-web-and-app-typography/lineHeightExamples.png)

**X-height**

X-height was a new typographic characteristics for me. It is the height of a lowercase “x” in comparison to the height of a uppercase letter. What is a more readable x-height differs here between paper and on screen. A very general rule is that a lower x-height is suitable for paper while a higher one is suitable for screens.

![Examples of different x-heights](/images/blogs/exploring-web-and-app-typography/x-height.png)

Why is it important to know about x-height if this rule might not always apply? Lets say that you have thought carefully about using sans-serif or serif, your using a readable font weight and taken into consideration your character spacing and line height, but you still feel like something is of with your font. Then it is a good reminder to compare some similar fonts which have different x-height.

**What font size should I use?**

There's actually a sweet spot for text size on 12 to 14 points for body text, which translates to about 16 to 19 pixels on typical screens (those with 96 pixels per inch). This range isn't just arbitrary - it strikes that perfect balance between readability and efficient use of space, according to multiple design resources i came across while doing this research. Of course, this can be adjusted upward when designing for audiences who might need larger text. [source](https://www.boia.org/blog/best-fonts-to-use-for-website-accessibility), [source](https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html)

As a side note, when looking into points and pixels, I came across the concept of physical pixels. What we commonly call pixels aren't actually "physical" pixels at all, but rather "logical" ones. This is a topic that deserves its own deep dive, so we will take a quick look to clear up common misconceptions around this topic.

## A pixel detour

Physical pixels are picture elements, basically lights that consist of red, blue, and green sub-lights. Your screen's resolution is based on the number of physical pixels that make up the screen.

![A grid of physical pixels](/images/blogs/exploring-web-and-app-typography/physical-pixels.png)

And what about logical pixels? They are a bit more conceptual. A logical pixel specifies a color value somewhere in a grid—the grid being the physical pixels. This means that until we use them in a context, logical pixels do not have a physical dimension.

The relationship between the two types of pixels is measured in DPR (device pixel ratio). This is a quadratic relationship:

- 1 DPR equals 1 logical pixel per 1 physical pixel,
- 2 DPR equals 1 logical pixel per 4 physical pixels, etc.

Here's an image example:

![Visualisation of physical pixels in relation to logical pixels](/images/blogs/exploring-web-and-app-typography/pixels.png)

### Why Your 12px Font Isn't Actually 12 Pixels Wide

It's easy to think about pixels as if they take up width, and that font size 12 would be 12 logical pixels in width. However, when reading up on this topic, I found that when we talk about pixels, we are referring to the height of the font. Let's break this down: If you set a font size to 2px, each letter will be exactly 2 pixels tall, but their widths can vary significantly. Think about it - an 'I' naturally needs less horizontal space than an 'H'. Here's a practical example: with a font size of 7 pixels on a 1 DPR (Device Pixel Ratio) grid, every character will be exactly 7 pixels high, but their widths will differ to maintain proper proportions.

![Example showing that pixels are set in height](/images/blogs/exploring-web-and-app-typography/pixel-height.png)

### The Hidden Reason Some Letters Get Blurry When You Zoom

This is, of course, a brief overview of pixels, but a question arose while reading about the subject: How are characters with more intricate shapes, like curves and narrow angles, rendered in relation to the physical pixel grid? Take a look at this zoomed-in photo of the character O. See how the rounded shape is created by pixels in grey scale. Shapes that don’t fit into straight angles can be created by working in the bounds of the pixels using shades of grey to visually soften the angles. This also seems to be the reason that we get the blurred effect when zooming in too much on these types of letters and symbols, as we loose some sharpness.

![Shaded pixels forming an O-shape](/images/blogs/exploring-web-and-app-typography/pixels-in-non-square-shapes.png)

Let’s compare the “o” to a capital “H” from before, zoomed in to the same level. See how the “H” does not get the same blurred result as it can fit within the shape of the square pixels naturally.

![Pixels forming an H-shape](/images/blogs/exploring-web-and-app-typography/pixels-in-square-shapes.png)

## Headers

What about headers? As with any font, there is no strict rule about the size of headers. However, while looking around for guidelines, I came across one recommendation of 30–50px paired with a bold font weight for desktops [source](https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html). In general, think bigger and avoid the beginner mistake of underemphasizing your headlines. Another article suggested making the H1 header 300% of the body font size and the H2 200%. [source](https://bowwe.com/blog/typography-rules)

![Header examples for web](/images/blogs/exploring-web-and-app-typography/Frame_4.png)

For mobile devices, there are additional guidelines considering the width limitations. A header is recommended to fit within two lines [source](https://bowwe.com/blog/typography-rules). This is an example of how this differs from using the header sizing suggestions for the web. As you can see, the overall text becomes more readable as the eye doesn’t have to scan through four lines of text just to get through the title.

![Good and bad practice header examples for mobile](/images/blogs/exploring-web-and-app-typography/headers.png)

## Other considerations regarding font size

If you are designing an application meant to be viewed on mobile devices, here is another thing I came across that is good to keep in mind. Text input fields that have a smaller font size than 16px will be zoomed in on the left side of the input field on iOS browsers. This forces the user to manually zoom out after using the text input, so if you want to avoid this user inconvenience, stick to 16px as a minimum font size. [source](https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html)

Other guidelines for text include using high-contrast colors between the background and font, and avoiding the use of reds and greens, considering color-blind users. Use as few fonts as possible, as this improves readability, clarity, and reduces confusion. Avoid using text styles like bold or italic as the sole means to convey meaning. This is because not all screen readers inform users about their use. Bold and italic text can instead be utilized as a complement. [source](https://www.boia.org/blog/best-fonts-to-use-for-website-accessibility)

## Last and Least – Secondary Text

For text like labels and captions, the general guideline is to use a text size that is a few sizes smaller than the body text. As this type of text is less important, it can also be indicated by using a slightly lighter shade, like gray, if the rest of the text is black. The lighter shade can be applied on its own or together with a smaller text size.

## Final thoughts

Let's face it - web typography is complex, and we're all still learning. What began as seemingly simple questions about typography led us down a fascinating rabbit hole, revealing layers of complexity we might not have expected. Through exploring these topics together, we've discovered some helpful practices and guidelines that start to demystify typography and font scaling for web accessibility. While there's always more to learn, I hope this overview can serve as a useful reference point when similar questions arise, and as a helping hand while creating digital experiences that work better for all users.

## Glossary

### Font

A font is a specific design of text as it appears visually on a screen or in print. This means that a font is the particular style, size, and appearance of the letters and characters you see when you read text.

### **Typography**

Typography is the style and appearance of text in published form. It includes selection of typefaces, fonts, text size as well as spacing of lines, letters and words. As an art form typography dates back to the 11th century. It was originally studied for its use in printed material such as newspapers and books.

### Typeface

A typeface is a family of related fonts that differ in attributes like width, weight and possibly different styles. The basic type of typefaces are serif, sans-serif and decorative.

### pt (points)

A point is a physical unit of measurement commonly used in print media. It is traditionally defined as 1/72 of an inch.

### px (Pixels)

A pixel is a unit of measurement based on the smallest dot that can be displayed on a digital screen.

### em

An em is a relative unit of measurement in typography. It is based on the font size of the element it is used on.

### rem

A rem is similar to an em but is relative to the root element (typically the `<html>` element) font size, rather than the parent element.

### Percent (%)

Percentage units are relative to the font size of the parent element.

### vh (Viewport Height) and vw (Viewport Width)

Vh and vw are relative units based on the size of the viewport (the visible area of the web page).

### ex and ch

Ex units are relative to the height of the lowercase letter "x" in the font, and ch units are relative to the width of the "0" (zero) character. These units are less commonly used but can be helpful for aligning text and creating responsive designs.


Exploring web and app typography


## From canvas to screen

When I started the journey of creating user interfaces a few years ago, I found myself excited yet a bit overwhelmed by the task of picking the right colors for my designs. As someone who loves putting together color schemes for everything from interior design, to outfits or creating a piece of art, I find the process can be really fun. It can also get difficult without one fully understanding all the factors involved. Aspects like accessibility, color contrast, and how people perceive colors are very important. In my case, when the canvas all of a sudden became a screen, my lack of knowledge in these areas became evident. I ended up puzzled when what I thought was a great color scheme ended up making my sites look dull and messy.

## So where to start?

The UI (user interface) has the power to make or break the user experience and determine how engaging, user-friendly, and visually cohesive your design appears. Color palettes, being a big part of the UI, are an important factor in this. While established brands usually stick to their own predefined color schemes, creating one from scratch brings its own considerations — both liberating and challenging. In this post, I want to share what I've learned about creating a color scheme from square one.

### Color theory

Before delving into UI design, my knowledge of color theory mostly came from my work experience in the fashion world. It's a vast topic, but it's incredibly helpful for anyone interested in understanding colors. Here, I'll discuss some specific aspects of color theory that have been significant for me. One key aspect is color relationships, which involve different ways of combining colors based on how they complement each other, such as complementary, analogous, and triadic schemes.

![Visualization of complementary colors.](/images/blogs/creating-ui-color-scheme/complementary-colors.png)

Using these relationships as a tool is usually a safe way to combine colors that work well together. A caveat to keep in mind, especially for beginners, is that colors can vary in saturation, and they can have different tints (mixed with white), shades (mixed with black) and tones (mixed with grey). Keep this in mind while exploring which colors to pair together, as it expands your options.

![Image of a red tints, shades and hues .](/images/blogs/creating-ui-color-scheme/colortints.png)

### Color Psychology

Another crucial aspect to working with colors for UI designs is the topic of color psychology. I think it is fascinating how colors can evoke various emotions and carry different meanings. Have you ever wondered how colors influence our mood? Although our perceptions can differ from person to person, some effects seem to have universal significance.

It's important to note that color associations can vary across cultures and individuals. Let’s look at the color red as an example. In Western cultures, red embodies danger, love, action, passion, energy, and excitement. In Asian cultures, red holds auspicious significance, symbolizing long life, happiness, prosperity, and good luck. It's common for Asian brides to wear red wedding dresses, and for red envelopes filled with money to be exchanged during special events and holidays, like the New Year celebration.

In India, red carries connotations of spirituality, sensuality, fertility, power, wealth, and beauty. Married women often decorate their hands with red henna and apply sindoor along the hairline as a symbol of marriage. However, in some African countries, red signifies death, while in Nigeria, it represents vitality and aggression, and in Iran, it symbolizes courage and good fortune.
source: https://www.daytranslations.com/blog/color-psychology/

Building on our exploration of color psychology, it's fascinating to see how customers also associate specific colors with various industries. For instance, blue often symbolizes the tech and finance sector, green is commonly linked with environment or health-related services, and red is frequently associated with fast-food establishments.

[![Color emotion guide. A color cordinated chart of company logos.](/images/blogs/creating-ui-color-scheme/color-emotion-guide.png)](https://www.usertesting.com/blog/color-ux-conversion-rates#psychology)

You can use these associations to your advantage by following them or purposefully breaking them. Consider the traditional expectations of your target audience. How might they respond to a departure from the usual color conventions? Would it be a pleasant surprise or potentially disorienting for them? Furthermore, think about the message your design would convey by diverging from these established norms in your industry's color scheme.

## Accessibility considerations

### Color Contrast

Another trap that I faced when it comes to choosing colors was not considering the color contrast between informative text and its background. Today, I never create a website or app without first checking the color contrast. Why should we, as designers and developers, care about this? The purpose is to make informative content readable to users with moderately low vision. According to the Web Accessibility Initiative, default foreground and background color combinations that provide sufficient color contrast are part of the accessibility principles.
source: https://www.w3.org/WAI/fundamentals/accessibility-principles/
The standardized way for checking the contrast level is by using the **WCAG contrast ratios**. There are easy ways to test the ratios with the help of a color contrast checker like [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/)

![Two blue boxes with text inside showing good and bad color contrast.](/images/blogs/creating-ui-color-scheme/contrast.png)

Above are two examples of an unapproved and approved contrast ratio. The scale ranges from 1 (zero contrast) to 21 (maximum contrast). The minimum contrast ratio is 4.5:1, except for large-scale text, which must have a contrast ratio of at least 3:1. I recommend reading on the WCAG official site to learn more about this area.
source: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

![Screenshot from WCAG's site, showing a contrast ratio that is failing the standard for text.](/images/blogs/creating-ui-color-scheme/low-contrast-ratio.png)
![Screenshot from WCAG's site, showing a contrast ratio that is passing the standard for text.](/images/blogs/creating-ui-color-scheme/good-contrast-ratio.png)

### Color Blindness

Another consideration to take into account is users with color blindness. This is a vision deficiency that makes it hard to distinguish between some colors. There are three types of color blindness:

- Red-green
- Blue-yellow
- Complete color vision deficiency

source: https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness

[![Visualisation for different types of color blindness.](/images/blogs/creating-ui-color-scheme/color-blindness.png)](https://www.interaction-design.org/literature/article/ui-color-palette#how_to_create_a_ui_color_palette:_trends_and_best_practices_for_2023-5)

As a developer, I try to keep this in mind when making decisions about color. It might not always mean that we should not use these colors, but rather that we can employ other methods to convey information, such as adding text or symbols to your design. For example, people generally associate green with success and red with failure, so we can use complementary success and failure messages to cater to users with red-green or complete color blindness.

## Put It into Practice

Being more aware of these considerations, let’s revisit the main question: How do we go about creating a UI color palette in practice? This involves a mix of creativity, awareness of current design trends, and an understanding of the impact of color on user behavior. Here are some more concrete tips that I find helpful:

### Use the 60-30-10 Rule

Imagining your full design as 100%, you can use this rule as a guideline. This is a time-tested guideline that ensures balance and visual comfort in your design. According to this rule, **60%** of your space should be covered with the primary color, **30%** with the secondary or supportive color, and lastly **10%** with an accent or guiding color.

Taking a web design as an example, use the primary color for larger areas like the background and header, the secondary color for subheadings or captions, and the accent color for buttons or links. I think guidelines like this can be very helpful, but at the same time, it is important not to be limited by them. After all, design is a creative process that's all about innovation and trying new things, going beyond strict rules and guidelines.

![Color sheme for the Fortnox website. Colors: Dark green, green, white and yellow.](/images/blogs/creating-ui-color-scheme/fortnox-color-scheme.png)

![Fortnox website](/images/blogs/creating-ui-color-scheme/fortnox-site.png)

In this website, the use of white comprises around 60%, dark green covers 30%, and 10% consists of accents in green and yellow. The use of greens and yellow is also a perfect example of employing an analogous color combination, as we discussed in the color theory section.

![Analougus color wheel example.](/images/blogs/creating-ui-color-scheme/yellow-green.png)

### Stick to a Maximum of Four Main Colors

Speaking of guidelines, one that I've set for myself to maintain a clean design is to stick to using a primary color, a secondary color, and one or two accent colors. An example from my own portfolio page illustrates this:
![Color sheme for my portfolio site. Colors: Black, blue, light peach and white.](/images/blogs/creating-ui-color-scheme/home-page-color-scheme.png)

You can see the colors in use here. In this case, I'm not strictly adhering to the 60-30-10 rule, but its general idea is still implemented through the use of primary, secondary, and accent colors. Returning to color theory, here I also utilized blue and coral colors that are opposite to each other on the color wheel and I am using the similar tint and saturation to create harmony between them.

![My portfolio page.](/images/blogs/creating-ui-color-scheme/home-page.png)

### Find Inspiration

Use Pinterest or a similar platform to collect images that relate to the area your application is related to. I like using this method to find inspiration from the colors, shapes, and general vibe that the collected images give me. I think it's an easily implemented idea to quickly gather color inspiration that will feel natural to the design. It will give you an immediate starting point to curate the final color palette.

Here's an example from one of my own projects: an app related to electrical boat engines. As you can see, there is a variety of shades that can be found in the images. These were narrowed down to four or five colors in the end but served as a great starting point.

![Images and color inspiration for electrical boat engine app.](/images/blogs/creating-ui-color-scheme/boat-app-inspiration.png)

Another way to gather initial inspiration is to use sites that offer premade palettes. These platforms provide a wealth of curated color schemes that can jump-start your creativity, especially if you're feeling stuck or overwhelmed. This is a method I used more when starting out and was at times clueless about where to begin. However, it still proves helpful when inspiration runs dry. Some examples of sites are [Colorhunt](https://colorhunt.co/) and [Coolors](https://coolors.co/), but there are plenty of other sites out there to explore.

### When in Doubt, KISS

As I was searching for examples of websites to use for this post, I noticed a pattern in many of the bigger, well-used platforms. They kept the colors of the page minimal, often using different shades of white together with the brands colors as the only color pop. Alternatively, some utilized the same idea but switched out the light shade for shades of dark grey and black for a dark mode. This gives a more generic but instantly professional look that is familiar to most users. Below are some examples:

![Traderas home page](/images/blogs/creating-ui-color-scheme/tradera-site.png)

![Netflix home page](/images/blogs/creating-ui-color-scheme/netflix-site.png)

![Apple site](/images/blogs/creating-ui-color-scheme/apple-site.png)

## Wrapping up

A point I keep coming back to when discussing UI design with peers is how the subjective nature of design makes this a tricky area to work in. There are essentially as many opinions as there are human beings. So how do we as designers judge what is right or wrong? The answer is we can’t, but what we can do is focus on creating a good, user friendly interface. In the case of color palettes, this means creating a palette by, for example, considering the topics discussed in this post. Of course, there are other ways to approach this; even here, there are no real right or wrong methods.

The real challenge lies in combining these aspects, from gathering initial inspiration to considering color theory, psychology, and the cultural meaning of colors, while simultaneously not forgetting about accessibility aspects. This boils down to understanding your audience and the message you want to convey through your website or application.


JK

Blog