vf-text component
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 thesevf-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`
- Read the Visual Framework troubleshooting
- Open a ticket
- Chat on Slack