Xmeter Style Guide

6.6 #Helpers.FontSize FontSize

Toggle example guides Toggle HTML markup

The FontSize Helper sets the font-size of an element while maintaining vertical rhythm. Add [class="h-Fontsize"] to an element, and then set the --font-scale custom property (and optionally the --tracks custom property), either via inline style or stylesheet. This Helper adjusts the line-height of the element so that track size remains unaffected.

author
Chris Harvey
updated
Example

This paragraph has a font-size of 2.25em, and an adjusted line-height so that each line of text takes up exactly 1 track. Vertical rhythm is maintained. However, this example’s font-size is too big to be read clearly.

Set the `--tracks` to an integer in order to adjust the number of “tracks” each line of text takes up. In this paragraph, each line of text takes up 2 tracks instead of the default 1. This increased leading provides a more pleasant reading experience.

Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-FontSize.css"/-->
<p class="h-FontSize" style="--font-scale: 2.25;">This paragraph has a font-size of 2.25em,
  and an adjusted line-height so that each line of text takes up exactly 1 track.
  Vertical rhythm is maintained.
  However, this example’s font-size is too big to be read clearly.</p>
<p class="h-FontSize" style="--font-scale: 2.25; --tracks: 2;">Set the `--tracks` to an integer
  in order to adjust the number of “tracks” each line of text takes up.
  In this paragraph, each line of text takes up 2 tracks instead of the default 1.
  This increased leading provides a more pleasant reading experience.</p>
Source: _h-FontSize.less, line 6