Text
Running text: what people read. In Feitio’s serif, with lines that never get uncomfortably long.
On this page
Playground
The backup runs every Sunday at 3. If something fails, the notice arrives with the reason and what to do.
Background
<p class="feitio-text">The backup runs every Sunday at 3. If something fails, the notice arrives with the reason and what to do.</p>When to use
- To explain, tell, guide: any paragraph.
- In three sizes: lead, default and small.
When not to use
- For field labels, buttons and tables: those use the sans, and each component handles it.
- For important notices: use Notice. Small text cannot carry a notice.
Examples
The sentence that says what the page is for.
Running text, in the serif, with lines of at most 70 characters so it does not tire.
Caption, field hint, footer.
The three sizes
Lead for a page’s first paragraph, default for the rest, small for captions and hints.
Show code
<p class="feitio-text" data-size="lead">A frase que diz para que serve a página.</p>
<p class="feitio-text">O texto corrido…</p>
<p class="feitio-text" data-size="small">Legenda, dica de campo, rodapé.</p>Do and don’t
Do
The backup runs every night at 3. If it fails, you get a notice.
Two short sentences: what happens and what to do.
Don’t
Warning: if the backup fails three times in a row, today’s data will not be protected.
A serious warning in small print goes unnoticed. That is a Notice.
Writing
- Short sentences, active voice, the person as the subject when possible.
- One idea per paragraph.
Accessibility
- Default and soft text contrast passes WCAG AA in both modes; Feitio’s test makes sure.
- Lines of up to 70 characters and 1.6 line height, for people who struggle with reading.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-text" | required | Running text in the serif, up to 70 characters per line. |
data-size | none, "lead", "small" | Default (without the attribute), lead or small. |