The “Font Weight” module allows applying different sizes for body copy.

Note: I am using the numbers as the naming conventions thin, black, medium, regular, might not be as readily understand as numbers that grow. The downside to this convention is if intermediate numbers are used (with variable fonts), but the tradeoff feels appropriate. It’s also a lot easier to write the numbers out (less typing).

Classes

The “Font Size” values correspond to the typographic scale for body copy.

Font Weight / 100

Font Weight / 200

Font Weight / 300

Font Weight / 400

Font Weight / 500

Font Weight / 600

Font Weight / 700

Font Weight / 800

Font Weight / 900

<aside> 💡 The font Size M values correspond to the font size defined in the Body tag.

</aside>

Index

• Forward Slash
  1. What is Forward Slash?
  2. 4 class types
     1. Basic classes
     2. Component classes
     3. Structural classes
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Functional Classes
        1. Vertical
        2. Horizontal
        3. Padding
        4. Color
        5. Bg
        6. Heading
        7. Font Size
        8. Font Style
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
  3. Class combination
     1. Combo-classes
     2. Multi-classes
  4. Grid
  5. Gap
  6. Foundational scales
     1. Foundational scale for headings
     2. Foundational scale for heading in Rich Text
     3. Foundational scale for body text
     4. Foundational scale for spacing
  7. What’s New?