Typography

Flux ships a consistent typographic system covering font families, sizes, weights, and spacing. This page documents how typography works in Flux and how to apply it to text throughout your application.

Outside of any container, Flux applies only light element defaults: heading sizes and weights, link styling and a monospace font for code. Rich prose, with vertical rhythm, decorated blockquotes, list markers and styled tables, lives inside the Prose component. Every example below is wrapped in FluxProse.

TIP

Flux uses the Inter Variable font family by default, you will need to include the font in your application for it to work.

The text scale

Text comes in six steps, and each step pairs a font-size with a line-height. Always set the two together: a font-size on its own derives its line box from a ratio, which lands on fractional pixels at every size except the default and drifts off the 3px grid.

.my-label {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

Pick a step by role rather than by measuring the design:

• 2xsmall (12/18) for fine print, such as meta rows and counters.
• xsmall (13/18) for compact labels that sit inline in body text, like a badge.
• small (14/21) for interface text: tables, menus, tooltips.
• default (15/24) for body text. This is inherited, so you rarely set it.
• large (16/24) for a prominent single line, such as a pane caption.
• xlarge (18/27) for titles that sit below heading level.

Deviate from a pair only when an element has to line up with a line box it does not own. A checkbox label is the canonical case: the box is 21px, so its label takes default at a 21px line-height instead of its own 24px, or the two stop aligning.

Anything with a fixed height should set its own step rather than inherit one. A button is 42px tall whatever you put around it, so its label stays 15px even inside a 14px table cell. Text that should adapt to its surroundings, such as a badge sitting inline in a sentence, is the exception that inherits.

See Design tokens for the full table.

Examples

Headings

Preview

Flux heading 1

Flux heading 2

Flux heading 3

Flux heading 4

Flux heading 5

Flux heading 6

Code

<template>
    <FluxProse>
        <h1>Flux heading 1</h1>
        <h2>Flux heading 2</h2>
        <h3>Flux heading 3</h3>
        <h4>Flux heading 4</h4>
        <h5>Flux heading 5</h5>
        <h6>Flux heading 6</h6>
    </FluxProse>
</template>

<script
    setup
    lang="ts">
    import { FluxProse } from '@flux-ui/components';
</script>

Paragraph

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut ex excepturi expedita pariatur perspiciatis! Amet aperiam aut commodi fugit harum, id, incidunt necessitatibus, nemo nisi placeat voluptatem voluptatum!

Aspernatur commodi cum debitis doloremque, ea et harum hic illum natus nulla quam quisquam rem rerum similique tempora totam ullam vel. Accusamus consequuntur dicta facilis labore modi mollitia, perspiciatis voluptate?

Assumenda beatae commodi dolor dolore eum ex, excepturi fugiat id, inventore iure maiores maxime minima nesciunt nostrum, quidem sed sequi soluta tempora ullam voluptatem? Atque consequatur non omnis perferendis suscipit.

Code

<template>
    <FluxProse>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut ex excepturi expedita pariatur perspiciatis! Amet aperiam aut commodi fugit harum, id, incidunt necessitatibus, nemo nisi placeat voluptatem voluptatum!</p>
        <p>Aspernatur commodi cum debitis doloremque, ea et harum hic illum natus nulla quam quisquam rem rerum similique tempora totam ullam vel. Accusamus consequuntur dicta facilis labore modi mollitia, perspiciatis voluptate?</p>
        <p>Assumenda beatae commodi dolor dolore eum ex, excepturi fugiat id, inventore iure maiores maxime minima nesciunt nostrum, quidem sed sequi soluta tempora ullam voluptatem? Atque consequatur non omnis perferendis suscipit.</p>
    </FluxProse>
</template>

<script
    setup
    lang="ts">
    import { FluxProse } from '@flux-ui/components';
</script>

Lists

Preview

Unordered list

• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.
• Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!
• Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.

Ordered list

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.
2. Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!
3. Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.

Code

<template>
    <FluxProse>
        <h3>Unordered list</h3>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.</li>
            <li>Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!</li>
            <li>Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.</li>
        </ul>

        <h3>Ordered list</h3>
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.</li>
            <li>Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!</li>
            <li>Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.</li>
        </ol>
    </FluxProse>
</template>

<script
    setup
    lang="ts">
    import { FluxProse } from '@flux-ui/components';
</script>

Image

Preview

Code

<template>
    <FluxProse>
        <img src="https://images.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
            alt=""/>
    </FluxProse>
</template>

<script
    setup
    lang="ts">
    import { FluxProse } from '@flux-ui/components';
</script>

Blockquote

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dolor doloribus eos exercitationem fugit harum id in labore laborum maiores nemo nulla omnis provident, quia quidem quod sit voluptas.

Code

<template>
    <FluxProse>
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dolor doloribus eos exercitationem fugit harum id in labore laborum maiores nemo nulla omnis provident, quia quidem quod sit voluptas.</blockquote>
    </FluxProse>
</template>

<script
    setup
    lang="ts">
    import { FluxProse } from '@flux-ui/components';
</script>

Using Inter Variable font

If you desire to use the Inter Variable font, you need to override the --font-sans css variable. To achieve this, you'll need to add the following to your application.

app.css

:root {
    --font-sans: inter-variable, sans-serif;
}