In the first second, a site's character comes from its colours and fonts. But the key design question isn't "is it pretty?" but "is it readable, and does it guide the user correctly?". These rules are the basis of a site that's both good-looking and usable.
Colour: little, and with purpose
- Start from your brand colour. The colours of your logo and brand book are the basis for the site too (see What is a brand book).
- The 60–30–10 rule. Roughly 60% main background (often white or light), 30% secondary colour (blocks, headings), 10% accent colour (buttons, key elements).
- Protect the accent colour. Use the main button's colour sparingly elsewhere — then the eye finds the button immediately.
- Colour meaning. Green reads as "success/confirmed" and red as "error/warning" — don't use them for decoration.
Contrast: the condition for readability
Light grey text on a light grey background looks elegant on the designer's screen but can't be read on a phone in the sun. The international accessibility standard (WCAG) recommends a contrast between text and background of at least 4.5:1 for normal text and 3:1 for large headings. The browser's developer tools and free online contrast checkers measure this in a second.
Fonts: two are enough
- At most two font families — one for headings, one for body text. Or different weights of one family.
- Text size. On phones, body text shouldn't be smaller than 16 pixels; a line height of about 1.5 times the size makes reading easier.
- Line length. On a wide screen, 60–80 characters per line is comfortable to read; lines stretching across the whole screen are tiring.
- Decorative fonts are only for the logo and large headings — they don't work for body text.
Azerbaijani letters: the most forgotten check
Not every font supports the letters ə, ğ, ı, ö, ü, ç, ş. When a font doesn't, the browser shows those letters in another font, and mismatched "patched-in" letters appear in the middle of the text. The letter "ə" in particular is missing from many fonts. When choosing a font, type a test phrase like "Ədəbiyyat, ğ, ı, ş, ç" and check.
Speed is part of design too
Every extra font and weight adds files to the page. Load only the weights you use, and don't leave text invisible while the font loads. More: Core Web Vitals in plain language.
Dark mode
Some users have dark mode turned on on their phones. If the site supports it, the colours have to be chosen separately: simply "inverting" often creates tiring contrast, and the logo needs a version for dark backgrounds too.
A quick checklist
- The main button stands out on the page straight away;
- Text contrast is at least 4.5:1;
- On phones, text is no smaller than 16 pixels;
- No more than two font families are used;
- All Azerbaijani letters display in the same font.
If you'd like to refresh your site's design or order UI/UX design, see our design services.
