On this page
Options
A few styles, each with a job
envUI sets text in six styles, from the one large line that opens a page to small notes.
- Each style has one job, so a title or a note looks the same on every screen.
Every style
Each style, largest first, in the theme you are reading in, with what it is for.
Quieter, not smaller
Text can step back without getting smaller: supporting text takes a quieter color than the main text, at any size.
- The main color is for what people read first, and the quieter one for details, dates and hints.
- Both keep their contrast in every theme, high contrast included.
One typeface, two weights
Everything is set in one typeface, at a regular weight for reading and a medium weight for headings and labels.
- A bold weight is kept for the strongest emphasis in a small space, such as today in a calendar.
Behaviour
Text follows the reader
Text grows with the text size people choose in their browser, and the compact scale makes every style a step smaller.
Rules
Running text reads best in short paragraphs whose lines stop at a comfortable length.
A lead, then quieter detail
Open a page or a section with a sentence or two in the main color that say what matters.
- Set the detail after it in the quieter color, or a step smaller, so people can read the start and skip the rest.
Lines a comfortable length
A line holds about as many words as a line of a book.
- However wide the window, a paragraph wraps at that length, so the eye finds the start of the next line easily.
Short paragraphs
A paragraph makes one point in a few lines.
- Two points are two paragraphs, which read faster than one long block.
Space belongs to the layout
Text adds no space around itself.
- The space between a title and its paragraph comes from the group they are in, so text sits the same in every component.
Words to use
Ask an agent for text in these words; envUI turns each into a style, so the result matches the rest of the app.
- A hero line
The display style: one large line that opens a page.
- A page title
The headline style, as the page’s main heading.
- A section title
The title style, for a pane, a section, a card or a dialog.
- Supporting text
Text a step smaller and quieter, for details and hints.
- A caption
A small, quiet note under a figure or a chart.
- Quieter text
The same size in the quieter color of supporting text.
- A lead
The sentence or two that open a page or a section, in the main color, before quieter detail.
- Short paragraphs
Running text in paragraphs of a few lines, each line a comfortable length.