Tweak naming and docs of font utility classes

* `.font-normal` is too generic. Rename it to `.font-weight-normal` for clarity.
* Rename `.font-bold` to `.font-weight-bold` so as to parallel `.font-weight-normal`.
* In docs, gloss "weight" term in relation to fonts for the benefit of non-typographiles.

Refs #18433

[skip sauce]

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index c73db767fa237f20a6f11ad159a32af0d82500d6..940219263a050458a2ecb6a248ec38551736fa54 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -121,13 +121,13 @@ Transform text in components with text capitalization classes.
 <p class="text-capitalize">CapiTaliZed text.</p>
 {% endexample %}
 
-## Font weight and style
+## Font weight and italics
 
-Quickly change the weight and style of text.
+Quickly change the weight (boldness) of text or italicize text.
 
 {% example html %}
-<p class="font-normal">Normal text.</p>
-<p class="font-bold">Bold text.</p>
+<p class="font-weight-bold">Bold text.</p>
+<p class="font-weight-normal">Normal weight text.</p>
 <p class="font-italic">Italicized text.</p>
 {% endexample %}
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 78265a31fea741b795e152cde60d1cb01550ed43..520666ec1de8daa9d423d54dba7e13614f03adcc 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -74,9 +74,9 @@
 
 // Weight and italics
 
-.font-normal  { font-weight: normal; }
-.font-bold    { font-weight: bold; }
-.font-italic  { font-style: italic; }
+.font-weight-normal  { font-weight: normal; }
+.font-weight-bold    { font-weight: bold; }
+.font-italic         { font-style: italic; }
 
 // Contextual colors