For basic text formatting and sizes.
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.
- 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.
- 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.
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
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
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