Text component

About

For basic text formatting and sizes.

Usage

EMBL’s primary corporate typeface is IBM Plex Sans. Subdomains should use the same font except for cases where they have a different brand guideline.

The vf-text component leverages the design token typography sizes.

The default font size for paragraphs is 19px. 

Apply tokens, such as vf-text-body--1 to change the size and other stylistic elements of the default body text.

This component provides utility-like functionality and you'll rarely need to directly use this component. When coding a component's Sass, it will typically be better to use the mixins (@include set-type(text-body--1);) than these vf-text classes.

How to use

• Align a body of text to the left, this make it easier to read.
• Large body text - The large body text variant is used for lead paragraphs and blockquotes.
• Default body text - The default paragraph font size is 19px.
• Small body text - Text smaller than 16px is defined as part of certain vf components. Avoid using this for standalone paragraph text because it can be too small to read.
• For optimal readability avoid using body texts below 12 px.

How not to use

• Do not justify (Align a body of text to both the left and right) a body of text as this causes readability issues
• Do not use other typefaces in the Subdomains unless for cases with different brand guidelines.
• Avoid using all caps, as this makes it harder for a reader to identify words by shapes.
• Do not underline texts unless they are links.

Related documentation

For more information on text please consult the following documents:

• Align texts on one side | W3C
• Design for readability | Harvard University
• Readability | Cambridge brand resources
• Typography | GOV.UK  Design System

Install

This component is distributed with npm. After installing npm, you can install the vf-text with this command.

$ yarn add --dev @visual-framework/vf-text

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-text/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack