Typography Sets for LSX Design

[ashleyshaw]

Current State

LSX Design currently uses Lexend for headings and Manrope for body text. While this provides a clean modern look, it limits customization. In contrast, the Twenty Twenty-Five theme introduces a pairing of Roboto Slab (headings) and Manrope (body text). LSX Design currently uses custom spacing and font size presets. WordPress introduced standardized size values and units for fonts and spacing in recent releases, providing a more consistent design approach.

Issues

• Limited Customization: Users are restricted to Lexend for headings, limiting design flexibility.
• Custom Size Values: LSX Design’s custom values aren’t aligned with WordPress’ standardized options, leading to inconsistencies.

Recommendations

• New Font Pairings: Introduce more options such as Roboto Slab for headings combined with Manrope for body text (typography preset-4.json).
• Fluid Font Sizing: Leverage fluid typography to dynamically adjust font sizes based on screen width using presets like the medium and x-large options in WordPress’ latest updates.
• Adopt WordPress Defaults: Switch to WordPress’ absolute default font sizes and spacing values.
• Test Against Design System: Compare your current design system against the default WordPress sizes to ensure a smooth transition.

{
  "settings": {
    "spacing": {
      "blockGap": "var:preset|spacing|small"
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "size": "var:preset|font-size|small"
        }
      ]
    }
  }
}