Code examples
<Stack> <Text variant="xxl">xxl - I am 50px on desktop, and 36px on mobile</Text> <Text variant="xl-display">xl-display - I am 40px on desktop, and 30px on mobile</Text> <Text variant="xl-sans">xl-sans - I am 40px on desktop, and 30px on mobile</Text> <Text variant="lg">lg - I am 30px on desktop, and 24px on mobile</Text> <Text variant="md-lg">md-lg - I am 24px on desktop, and 21px on mobile</Text> <Text variant="md">md - I am 21px on desktop, and 18px on mobile</Text> <Text variant="sm">sm - I am 18px on desktop, and 16px on mobile</Text> <Text variant="xs">xs - I am 16px on desktop, and 14px on mobile</Text> <Text variant="2xs">2xs - I am 14px on desktop, and 12px on mobile</Text> </Stack>
Guidelines
Typography is one of the strongest tools we have for creating visual hierarchy. Therefore, it is important to follow some basic guidelines when getting started.
Fonts
Vy's font family consists of Vy Sans and Vy Display.
Vy Sans has a subtle character and a timeless design, with good readability. It is available in the following styles: Light, Regular, Bold, as well as Light Italic, Regular Italic, and Bold Italic. Light is used on Epi pages, while in React applications we prefer Regular and Bold. The italic styles are rarely used and only in special cases.
Vy Display has a distinctive visual expression and is available in only one style. It is less readable at small sizes and should therefore primarily be used for headings in sizes XL and XXL. In React applications, we prefer Vy Sans instead.
Sizes
We use six fixed font sizes: 2xl, xl, lg, md, sm, and xs. Each size has a corresponding fixed line height. 2xl is available only for Vy Display.
In the Vy app, lg, md, and sm are used most frequently. The default text style is “sm Regular”, supplemented with larger and smaller text styles as needed.
Xs is very small and should be used sparingly, only when the sm size is not feasible. For example, it may be used in small information boxes.
Text colors
There are several different text colors that can be used. Please see the documentation on design tokens hereEkstern lenke .
Always ensure sufficient contrast against the background in accordance with current WCAG requirements. If you are unsure, consult someone from the Design System team.
Code
<Text />
import { Text } from "@vygruppen/spor-react";
A paragraph of text
Props
Name | Type | Required? | Description |
|---|---|---|---|
variant | "2xl" | "xl-display" | "xl-sans" | "lg" | "lg-md" | "md" | "sm" | "xs" | "2xs" | The style of the text | |
truncate | boolean | Truncate the text after a single line | |
lineClamp | number | Truncates the text after the given number of lines |