MYP Design Typography and Colour in Interfaces Notes

Typeface Choice Is a Reading Speed Decision

1. A typeface is the design of the letters, such as Georgia or Inter, and a font is one version of it at a set weight and size.
2. Judge legibility before looks, and a fast check is whether capital I, lowercase l and the digit 1 are visibly different, which matters for codes and passwords.
3. Two typefaces is plenty for one product, usually one for headings and one for body text.
4. Check the family actually has the weights you want, because software faking bold by thickening letters looks wrong at any size.
5. System typefaces already on the device load instantly and download nothing, which matters on a slow school connection.

Serif Against Sans Serif on a Screen

1. Serifs are the small strokes on the ends of letters, as in Times New Roman and Georgia.
2. Sans serif typefaces such as Arial, Helvetica and Inter drop those strokes and leave plainer letter shapes.
3. Early screens had too few pixels to draw a serif cleanly, which is how sans serif became the default for interfaces.
4. Modern phone screens have pixels to spare, so a well made serif reads comfortably for long body text, which is why news sites still use them.
5. For buttons, labels and anything under 14 px, sans serif still wins because there is less fine detail to lose.

Size, Line Length and Line Height Do the Readability Work

1. Body text on a phone wants about 16 px, and dropping below 14 px starts pushing people into pinching to zoom.
2. Line length should land between 45 and 75 characters, which is roughly 8 to 12 words per line.
3. Lines that run too long make the eye lose its place on the jump back, and lines that are too short chop a sentence into fragments.
4. Line height, also called leading, of about 1.5 times the text size gives the eye a clear runway back to the next line.
5. Left aligned with a ragged right edge is the safe default, since justified text on a narrow screen opens rivers of white space between words.
6. Text set in all capitals reads more slowly because every word becomes the same rectangle, so keep capitals for short labels.

Colour Carries Meaning Before It Carries Style

1. Users read colour as a message: red for stop, error or delete, green for go, success or confirm, amber for caution.
2. Those meanings are learned rather than built in, and they shift between cultures, so check them against the people your persona describes.
3. Pick one accent colour for actions, and from then on anything in that colour is a promise that it can be tapped.
4. Keep greys for structure: backgrounds, borders, dividers and disabled states, because grey never competes for attention.
5. Colour sets mood as well, which is why a children's reading app and a banking app make different promises before a word is read.

A Palette Small Enough to Stick To

1. A workable palette is short: one primary, one accent, three or four greys, plus a success green and an error red.
2. Make shades by keeping one hue and changing only its lightness, which produces a family that visibly belongs together.
3. The 60 30 10 split is a useful starting point: 60% of the screen in a dominant neutral, 30% in a secondary, 10% in the accent.
4. Write the hex codes into your design folder, because "the blue one" is not something a moderator or a teammate can check.
5. Judge the palette on a phone at half brightness outdoors, which is a far harder test than a bright laptop in a classroom.

Contrast Ratio Is a Number, Not an Opinion

1. Whether text is readable against its background can be measured instead of argued about, and the measurement is the contrast ratio.
2. Black #000000 on white #FFFFFF measures 21 to 1, while mid grey #767676 on white measures about 4.5 to 1.
3. Body text needs at least 4.5 to 1, which is the AA level minimum in the Web Content Accessibility Guidelines, the published standard usually shortened to WCAG.
4. Large text, counted as 24 px regular or 18.66 px bold and above, is allowed down to 3 to 1 because bigger letter shapes survive lower contrast.
5. Interface parts count too, so a button border or an icon needs 3 to 1 against whatever sits behind it.
6. Free contrast checkers return the number from two hex codes in seconds, so paste your codes in and screenshot the result for your folder.

Colour Should Never Be the Only Clue

1. Roughly 1 in 12 men and 1 in 200 women have some colour vision deficiency, most often between reds and greens.
2. A form that marks wrong fields only by turning the border red tells those users nothing whatsoever.
3. Add a second channel every time: an icon, a word, an underline, a pattern or a change of position.
4. "Password too short" beside a warning icon works for everyone, while a red glow alone works for some.
5. Turn a screenshot to greyscale as a quick check, and anything that stops making sense needs its second clue adding.