Typography
Fonts, sizes and spacing for readable text.
One clean sans for the whole interface, a matching mono for the technical parts. AI products read as precise and calm when the type is quiet, so Tattva keeps it to two families.
Specimen
Type your own words and see every text size.
Clear screens for software that thinks.
Clear screens for software that thinks.
Clear screens for software that thinks.
Clear screens for software that thinks.
Clear screens for software that thinks.
Clear screens for software that thinks.
Clear screens for software that thinks.
Clear screens for software that thinks.
Pairing
A display style for the assistant's voice, the same family for buttons and labels, and a mono for technical values.
Good morning, Maya. Your week looks calm.
Two things are waiting for you. Nothing is stuck.
Measure
Slide to change how wide the lines are.
A good answer reads like a good page. Lines that are too long make you lose your place. Drag the slider and find the width that feels easy.
Scale
Big page titles
Home greeting, chat titles
Section headings
Chat text and long answers
Buttons, list rows, small pills
Small labels and notes
Section labels
Code and step names
One size scale
Every size in Tattva comes from one list. A size sets only the size; set the line height next to it with leading-*, so one choice never hides another. A check stops Tailwind's own sizes, like text-sm, from coming back.
text-nano10Tiny capital labels (12 on touch screens)text-micro11Badges and counts (12 on touch screens)text-small12Captions, helper text, timestampstext-compact13Buttons, list rows, chipstext-body14Interface text and fieldstext-body-lg15Chat answers and long readingtext-lead16Card titles, intro linestext-lead-lg17Large intro linestext-subhead18Panel and dialog titlestext-title-xs20Small page sectionstext-title-sm22Section headingstext-title-md26Page headings on phonestext-title-lg30Page headingstext-head-sm32Big headingstext-head-md40Hero headingstext-display-sm48Display titlesSizes are in rem, so they grow with the reader's text size setting. The numbers are pixels at the default setting. Larger steps (banner, display-md and up) are for the website and marketing pages.
Old names
Code written for 0.14 or earlier keeps working: the old names still exist, but parts no longer use them. Swap them like this and text keeps its size and spacing. The one exception is text-2xl: the scale has no 24px step, so it becomes 22px.
| Old | Now |
|---|---|
| text-xs | text-small leading-4 |
| text-sm | text-body leading-5 |
| text-base | text-lead leading-6 |
| text-lg | text-subhead leading-7 |
| text-xl | text-title-xs leading-7 |
| text-2xl | text-title-sm leading-8 |
| text-note | text-small leading-4.5 |
| text-label | text-small leading-4 |
| text-row | text-compact leading-4.5 |
| text-input | text-body leading-5.5 |
| text-answer | text-body leading-6 |
| text-panel | text-lead leading-6 |
Why these fonts
- Inter for the interface and the headings. The main AI assistants use a clean neo-grotesque sans for the whole interface. It reads as modern and neutral, and it lets the answers be the loudest thing on the screen. Geist ships as one variable file, so every weight from 400 to 700 is real. Its digits line up in columns, and it stays clear at 12px.
- Geist Mono for the technical parts. Use it for code, model names, tool names, token counts and ids. A mono label tells the reader "this is a machine value" without needing a colour.
- No serif by default. A book serif makes a product feel literary, and a cream page with an italic serif is now so common it no longer sets a product apart. If you want a warmer voice, set
data-voice="serif"on the root element and load a serif such as Newsreader: headings and the assistant's greetings switch, and nothing else changes. - Both fonts are free and open source (SIL Open Font License), so they are safe to use in any product.
Rules
- Headings (h1 to h3) use the display style: Inter at semibold with slightly tight letter spacing. Do not go heavier than semibold.
- Set technical values in Geist Mono: model names, tool names, counts and ids.
- Keep lines of text near 65 characters. Chats are at most 768px wide.
- Use evenly spaced digits wherever numbers line up, like times and counts.
- Use capital letters only for the 10px label style, with extra letter spacing.
- Pick sizes from the scale above and always pair them with a line height. Never use text-xs, text-sm or other Tailwind sizes.