<p dir="auto">It would help people to keep the font sizes on there site more consistent is classes were also offered as the same sizes as the the headings.<br>
E.g. bits of text that semantically are not headings, but for styling purposes should appear the same size, or are different levels in the document structure.</p>
<p dir="auto">The change would just be to add classes next to the headings in /less/type.less</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="h1, .h1 { font-size: (@font-size-base * 2.75); font-size: 4rem; } // ~38px
h2, .h2 { font-size: (@font-size-base * 2.25); font-size: 3rem; } // ~32px
h3, .h3 { font-size: (@font-size-base * 1.75); font-size: 2.5rem; } // ~24px
h4, .h4 { font-size: (@font-size-base * 1.25); font-size: 2rem; } // ~18px
h5, .h5 { font-size:  @font-size-base; font-size: 1.6rem; }
h6, .h6 { font-size: (@font-size-base * 0.85); font-size: 1.2rem; } // ~12px"><pre class="notranslate"><span class="pl-ent">h1</span><span class="pl-kos">,</span> .<span class="pl-c1">h1</span> { <span class="pl-c1">font-size</span><span class="pl-kos">:</span> (<span class="pl-k">@font-size-base</span> <span class="pl-c1">*</span> <span class="pl-c1">2.75</span>); <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">4<span class="pl-smi">rem</span></span>; } <span class="pl-c1">/</span><span class="pl-c1">/</span> <span class="pl-c1">~</span>38px
h2<span class="pl-kos">,</span> .<span class="pl-c1">h2</span> { <span class="pl-c1">font-size</span><span class="pl-kos">:</span> (<span class="pl-k">@font-size-base</span> <span class="pl-c1">*</span> <span class="pl-c1">2.25</span>); <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">3<span class="pl-smi">rem</span></span>; } <span class="pl-c1">/</span><span class="pl-c1">/</span> <span class="pl-c1">~</span>32px
h3<span class="pl-kos">,</span> .<span class="pl-c1">h3</span> { <span class="pl-c1">font-size</span><span class="pl-kos">:</span> (<span class="pl-k">@font-size-base</span> <span class="pl-c1">*</span> <span class="pl-c1">1.75</span>); <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">2.5<span class="pl-smi">rem</span></span>; } <span class="pl-c1">/</span><span class="pl-c1">/</span> <span class="pl-c1">~</span>24px
h4<span class="pl-kos">,</span> .<span class="pl-c1">h4</span> { <span class="pl-c1">font-size</span><span class="pl-kos">:</span> (<span class="pl-k">@font-size-base</span> <span class="pl-c1">*</span> <span class="pl-c1">1.25</span>); <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">2<span class="pl-smi">rem</span></span>; } <span class="pl-c1">/</span><span class="pl-c1">/</span> <span class="pl-c1">~</span>18px
h5<span class="pl-kos">,</span> .<span class="pl-c1">h5</span> { <span class="pl-c1">font-size</span><span class="pl-kos">:</span>  <span class="pl-k">@font-size-base</span>; <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">1.6<span class="pl-smi">rem</span></span>; }
<span class="pl-ent">h6</span><span class="pl-kos">,</span> .<span class="pl-c1">h6</span> { <span class="pl-c1">font-size</span><span class="pl-kos">:</span> (<span class="pl-k">@font-size-base</span> <span class="pl-c1">*</span> <span class="pl-c1">0.85</span>); <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">1.2<span class="pl-smi">rem</span></span>; } <span class="pl-c1">/</span><span class="pl-c1">/</span> <span class="pl-c1">~</span>12px</pre></div>
<p dir="auto">I can open the pull request, but mainly wondered about what naming style would be best.</p>
<p dir="auto">So i also found this issue from 6 months ago but its now closed, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="6988115" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/5203" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/5203/hovercard" href="https://github.com/twbs/bootstrap/issues/5203">#5203</a><br>
But i don't think it was clear the first time with this issue that it could help the consistency between font sizes on the site, and that it would not only be useful for heading tags, but for any text on a page.</p>
<p dir="auto">Upon trying to add the examples' CSS to the <code class="notranslate">csslint</code> Grunt task, I discovered that some of them fail csslint:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Running &quot;csslint:src&quot; (csslint) task
Linting docs/examples/blog/blog.css ...ERROR
[L44:C1]
Rule is empty. Rules without any properties specified should be removed. (empty-rules)
[L73:C3]
vertical-align can't be used with display: block. Certain properties shouldn't be used with certain display property values. (display-property-grouping)
Linting docs/examples/grid/grid.css ...ERROR
[L21:C3]
Duplicate property 'background-color' found. Duplicate properties must appear one after the other. (duplicate-properties)
[L22:C3]
Duplicate property 'border' found. Duplicate properties must appear one after the other. (duplicate-properties)
Linting docs/examples/justified-nav/justified-nav.css ...ERROR
[L44:C3]
Duplicate property 'background-image' found. Duplicate properties must appear one after the other. (duplicate-properties)
Linting docs/examples/non-responsive/non-responsive.css ...ERROR
[L41:C3]
Duplicate property 'background-color' found. Duplicate properties must appear one after the other. (duplicate-properties)
[L42:C3]
Duplicate property 'border' found. Duplicate properties must appear one after the other. (duplicate-properties)"><pre class="notranslate"><code class="notranslate">Running "csslint:src" (csslint) task
Linting docs/examples/blog/blog.css ...ERROR
[L44:C1]
Rule is empty. Rules without any properties specified should be removed. (empty-rules)
[L73:C3]
vertical-align can't be used with display: block. Certain properties shouldn't be used with certain display property values. (display-property-grouping)
Linting docs/examples/grid/grid.css ...ERROR
[L21:C3]
Duplicate property 'background-color' found. Duplicate properties must appear one after the other. (duplicate-properties)
[L22:C3]
Duplicate property 'border' found. Duplicate properties must appear one after the other. (duplicate-properties)
Linting docs/examples/justified-nav/justified-nav.css ...ERROR
[L44:C3]
Duplicate property 'background-image' found. Duplicate properties must appear one after the other. (duplicate-properties)
Linting docs/examples/non-responsive/non-responsive.css ...ERROR
[L41:C3]
Duplicate property 'background-color' found. Duplicate properties must appear one after the other. (duplicate-properties)
[L42:C3]
Duplicate property 'border' found. Duplicate properties must appear one after the other. (duplicate-properties)
</code></pre></div>