These properties are not directly accessible via css, but can be obtained from font-editing software like FontForge. The values are stored in
_settings_font.scss (the defaults apply to the Ubuntu font family). If you want to use this utility with another font, you will need to change the default values to match your font.
To import just this utility into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@include vf-u-visualise-baseline($horisontal-bleed: 2rem);
Then insert a
span with class
u-visualise-font-metrics in a heading, paragraph or button.
$horisontal-bleed variable (default value
2rem) makes the lines protrude on either side of the element, in order to help align adjacent elements. To remove the bleed, use
For more information on font metrics, this blog post gives a good overview.
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.