Typography (text font, size, spacing, and weight) conveys information to the user in often subtle but impactful ways. Without it the user can get confused and have a hard time understanding the information displayed…
Law of Similarity
GestaltLawOfSimilarity refers to how things are grouped together based on their similarities, think of similar shapes appear to be grouped together based on proximity, like a school of fish or herd of dear…
But how their shape, colour, and their proximity them defines how they’re grouped by the user/viewer.
Emphasis via colour
Sometimes in order to emphasise something you need to deemphasise what’s around it. For example, if you have white text on a black background then that’s max contrast, so you can tinker with the lightness of other text to deemphasise it.
colour and HSL
HSLcolour is a colour function that uses three values to determine the colour shade.
- Hue: this is the type of colour, such as Red, Green, or Blue. Measured in degrees on the colour wheel, 0 is Red.
- Saturation: controls the intensity of the hue colour. 0-100% with 0% being a shade of grey and 100% most intense version of it.
- Lightness: controls the brightness of the colour, 0% is black, 50% will give you the base colour, and 100% is white.
Using different colour shades (manipulating lightness) for card backgrounds can help things stick out. //Lighter shades appear on top.
Typescale
This refers to the font sizes in a project. Realistically the Typescale should have six font sizes and no more. These are:
- 24px - 1.5rem
- 20px - 1.25rem
- 18px - 1.125 rem
- 16px - 1rem
- 14px - 0.875rem
- 12px - 0.75rem
rem is the standard unit of measurement and is easier to track and manipulate than individual pixel measurements.
Honestly, you only need font sizes 3-5 for most projects. Combining size, weight, and colour is often enough to make the desired hierarchy without changing the size…
another commonTypescale
20px, Bold, 100% lightness
16px, Bold, 100% lightness
16px, Regular, 100% lightness
14px, Regular, 65% lightness
// note, this isn’t CSS…
It’s best to define your fonts as CSS variables from the start. Ex:
--ff: "Inter", sans-serif;
--h1: bold 1.125rem/1em var(--ff)Line height
em the em value defines the line height for a string, it also acts as a margin-bottom without adding any spacings
Light Mode
When working in DarkMode, you only need three lightness values, 0%, 10%, 50%, and 90%.
So in LightMode we need to invert the shades by taking the dark mode values and subtracting them from 100% to get their light mode counterparts.
| colour | Dark Mode | Light Mode |
|---|---|---|
| Background | 0% | 100% |
| colour 1 | 90% | 10% |
| colour 2 | 50% | 50% |
| colour 3 | 10% | 90% |