# Typography

Keston UI uses **Lato** in regular (400) and bold (700), with italics. It's served with the library from `theme.css`, so it works everywhere, including Safari, with no requests to Google.

## Sizes

The components use Tailwind's text sizes:

| Class | Size | Used for |
|---|---|---|
| `text-xs` | 12px | Helper text, field messages, small buttons, captions |
| `text-sm` | 14px | Most interface text: labels, fields, medium buttons, tables |
| `text-base` | 16px | Body text, large buttons, card titles |
| `text-lg` | 18px | Panel titles, e.g. a Slideover's |
| `text-xl` | 20px | Page and sign-in headings |

On touch screens, form fields use 16px text: iPhone zooms the page into any field with smaller text when it's tapped.

## Weight

Use bold (`font-bold`) for headings, names and totals. Everything else is regular. There's no semibold or light: two weights keep the hierarchy clear.

## Writing

- Sentence case everywhere: "Add a student", not "Add A Student".
- Say what something does: "Save changes", not "OK".
- Keep labels short, and put guidance in helper text.