feat: advanced typography configuration

[unekinn]

Summary

• moves typography into the theme layer
• allows configuring multiple fonts per theme in the config file
• allows configuring heading/body styles to use a specific font from the theme

This is a further development of #4044. While that has no breaking changes, it only allows configuring sizing for all themes/typography.

This change will be breaking for people who have started to use typography modes (primary/secondary) since those have been removed. It will also require some changes in the Figma Core UI Kit. However, I feel this is a much better path to take for supporting multiple fonts, and not many people have used typography modes yet due to it being half-baked so far with no config support.

Details

Example designsystemet.config.json

{
  "themes": {
    "my-theme": {
      "typography": {
        "fonts": {
          "primary": {
            "fontFamily": "Inter",
            "fontWeight": {
              "regular": "Regular",
              "medium": "Medium",
              "semibold": "Semi bold"
            }
          },
          "secondary": {
            "fontFamily": "Playfair Display",
            "fontWeight": {
              "regular": "Regular",
              "medium": "Medium",
              "semibold": "SemiBold"
            },
            "size": {
              "small": { "base": 13 },
              "medium": { "base": 15 },
              "large": { "base": 18 }
            }
          }
        },
        "components": {
          "heading": {
            "font": "secondary"
          },
          "body": {
            "font": "primary"
          }
        }
      }
    },
    "second-theme" {
      "typography": {
        "fonts": {
          "playpen": {
            "fontFamily": "Playpen Sans",
            "fontWeight": {
              "regular": "Regular",
              "medium": "Medium",
              "semibold": "SemiBold"
            },
            "size": {
              "small": { "base": 14 },
              "medium": { "base": 16 },
              "large": { "base": 18 }
            }
          },
          "karantina": {
            "fontFamily": "Karantina",
            "fontWeight": {
              "regular": "Light",
              "medium": "Regular",
              "semibold": "Bold"
            }
          }
        },
        "components": {
          "heading": {
            "font": "karantina"
          },
          "body": {
            "font": "playpen"
          }
        }
      }
    }
  }
}

Remaining work

Further work is required before this is ready:

• Adapt CSS generation from feat: modular font-size scale #4044 to work with this new token structure
• Determine what to do about "generate config from tokens". What should it actually try to do when run on the new token structure?
• Add line-height and letter-spacing to configuration
• Figure out if it's possible to not end up with references to "ghost variables" i the Figma file. I tried with no success, and had to fix some variable references manually.
• I think it should be possible to configure typography styles in a more granular way, to e.g. adjust which font or size is used per variant. Something like this would be very simple to implement:

    "second-theme" {
      "typography": {
        "components": {
          "heading": {
            "font": "karantina"
            "2xl": {
              // "10" here refers to token second-theme.fonts.karantina.font-size.10
                "size": "10"
            },
            "2xs": {
                "font": "playpen", // second-theme.fonts.playpen.font-family
                "weight": "semibold" // second-theme.fonts.playpen.font-weight.semibold
            }
          },
          "body": {
            "font": "playpen"
          }
        }
      }
    }
  

Checks

• I have read the contribution guidelines
• I have added a changeset (run pnpm changeset if relevant)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 15f4b1d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Preview deployments for this pull request:

storybook - 29. Jan 2026 - 11:05

www - 29. Jan 2026 - 11:10