# Text

Running text: what people read. In Feitio’s serif, with lines that never get uncomfortably long.

## Playground

```html
<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 three sizes

Lead for a page’s first paragraph, default for the rest, small for captions and hints.

Show code

```html
<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.