v5: Add .fs-* utilities for font-size and rename font-weight/-style utilities

[mdo]

• Adds new font-sizes Sass map
• Generates six new classes for setting only font-size
• Updates docs to mention this, including a scss-docs reference

It occurs to me this might need some rfs magic, but I'm unsure how to add that right now to the utilities file. Also, should these be responsive so folks can do .fs-md-3 .fs-lg-4? I'm thinking not given obvious file bloat.

Also makes me think .font-weight-* utilities should be shortened to .fw-*. .font-style is obviously trickier... could remap to .text-* or .font-*?

Fixes #25832.

https://deploy-preview-30571--twbs-bootstrap.netlify.app/docs/5.0/utilities/text/#font-size

[MartijnCuppens]

It occurs to me this might need some rfs magic, but I'm unsure how to add that right now to the utilities file.

Just add rfs: true to the utility map, and we should be fine.

Also, should these be responsive so folks can do .fs-md-3 .fs-lg-4? I'm thinking not given obvious file bloat.

Since RFS already rescales the font sizes, I don't think there's any need for this.

Also makes me think .font-weight-* utilities should be shortened to .fw-. .font-style is obviously trickier... could remap to .text- or .font-*?

Yup, fw seems appropriate, text-* might be confusing, especially for font-weight: normal.

---

I think it can be quite confusing that the margin of m-2 is larger than m-1, but fs-2 is smaller than fs-1. Also, if you want to add font sizes larger than fs-1, you'll need to add fs-0, which doesn't really make sense.

It might be better to work with sm/md/lg modifiers like this:

$font-sizes: (
  "xs": .75rem,
  "sm": .875rem,
  "md": 1rem,
  "lg": 1.25rem,
  "xl": 1.5rem,
  "xxl": 2rem
) !default;

[mdo]

It might be better to work with sm/md/lg modifiers like this:

I've been avoiding new classes that mix with our breakpoints notation to see if we can clear up "scales". I chose this approach since it maps 1:1 with our font-sizes on headings. I know we did it with line-height, but maybe we change that? Hmm...

[ffoodd]

Naming is pretty hard here, my two cents:

1. if map keys are 1-6, why keep $h*-font-size variable at all: they could be replaced by a loop in our reboot.
2. if not, couldn't we handle a single map with all our font-sizes, from small to display-1—but I don't have any clue of an accurate naming for now -_-

We could stick with numbers (like spacers) but it wouldn't match headings hierarchy anymore: but should it?

Thinking out loud for now, but there's more to be done I guess.

[mdo]

Going to hold on this for now with that last comment.

I'm wondering if we can build a single type scale system (GitHub/Primer does h000, h00, and h0) to go with all our type sizes and then nix the display classes. Unsure if it makes sense to change more classes or just add on.

[mdo]

Decided against the above. Let's leave the display classes as-is. v6 can tackle a single set of font-sizes if we still want it.

Just rebased and resolved the conflicts here. This should be ready for review now!

[XhmikosR]

@mdo this needs to move the migration section to alpha3 :)

[stormitornado]

I propose to name new classes as shortcuts in emmet:
fz - font-size
fs - font-style
fw - font-weight

[MartijnCuppens]