Typography
Typography can vary greatly, so it's important to adjust parameters to visually match the default typography styles provided by the plugin.
Downloadables
Download an overview of the text styles used for the plugin's default design:
Accessibility on text
Accessibility
Accessibility is imperative for web design because it ensures that all users, including those with disabilities, can access and interact with the content.
Generic recommendation tips for typography:
- Use REM units
- Do not typographies that have a thin, bold or capital letter regular style
- Do not use low readability and legibility typographies
- Match the typography weights of the default design
Best practices
Do not use thin typography styles
Do not use low readability or legibility typography styles
Do not use bold typography styles
Do not use script typography styles
Use typographies that have multiple weights
If the typography of the new brand doesn't have different weights, we recommend sticking with the provided by the plugin
Do not use a single weight typography for the plugin
Text size
Changing the size
Typography can vary greatly, so it's important to adjust parameters to visually match the default typography styles provided by the plugin. This means the actual REM units may differ, but the texts will appear similar in size.
Example
Different typographies with the same size can appear differently. Like in the example, the new typography looks bigger and needs to be adjusted.
New typography size adjusted
Line height
Change line height
Typography can vary greatly, so it's important to adjust parameters to visually match the default typography styles provided by the plugin. Adjust the line height of the new typography styles if necessary.
Example
The new typography has a smaller size and higher line height by default. It should be adjusted to match the original typography's visual proportions.
Improved size and line height