Typetune

Configure a modular scale with Google Fonts and export Figma-ready JSON tokens.

Do you have a saved config?

Font

Loading Google Fonts catalog...

Scale

Preview text

Headings

4 styles

Styles

2XL
font-size: 61.04pxline-height: 69.58pxweight: 700paragraph: 20px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

XL
font-size: 48.83pxline-height: 55.66pxweight: 700paragraph: 20px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

L
font-size: 39.06pxline-height: 44.53pxweight: 700paragraph: 20px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

M
font-size: 31.25pxline-height: 35.63pxweight: 700paragraph: 20px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

Body

3 styles

Styles

L
font-size: 20pxline-height: 30pxweight: 400paragraph: 12px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

M
font-size: 16pxline-height: 24pxweight: 400paragraph: 12px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

S
font-size: 12.8pxline-height: 19.2pxweight: 400paragraph: 12px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Each style preserves rhythm, weight, and spacing The system is ready to document and export tokens

Labels

3 styles

Styles

M
font-size: 16pxline-height: 16pxweight: 600paragraph: 4px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

S
font-size: 12.8pxline-height: 12.8pxweight: 600paragraph: 4px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

XS
font-size: 10.24pxline-height: 10.24pxweight: 600paragraph: 4px

Clear typography for content-heavy interfaces Consistent hierarchies make scanning and comparison faster

Tokens

Token map

TokenSizeLineWeightParagraph
headings.2xl61.04px69.58px70020px
headings.xl48.83px55.66px70020px
headings.l39.06px44.53px70020px
headings.m31.25px35.63px70020px
body.l20px30px40012px
body.m16px24px40012px
body.s12.8px19.2px40012px
labels.m16px16px6004px
labels.s12.8px12.8px6004px
labels.xs10.24px10.24px6004px

Standard JSON

{
  "tokens": {
    "headings.2xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 700,
        "fontSize": 61.04,
        "lineHeight": 69.58,
        "paragraphSpacing": 20
      }
    },
    "headings.xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 700,
        "fontSize": 48.83,
        "lineHeight": 55.66,
        "paragraphSpacing": 20
      }
    },
    "headings.l": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 700,
        "fontSize": 39.06,
        "lineHeight": 44.53,
        "paragraphSpacing": 20
      }
    },
    "headings.m": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 700,
        "fontSize": 31.25,
        "lineHeight": 35.63,
        "paragraphSpacing": 20
      }
    },
    "body.l": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 400,
        "fontSize": 20,
        "lineHeight": 30,
        "paragraphSpacing": 12
      }
    },
    "body.m": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 400,
        "fontSize": 16,
        "lineHeight": 24,
        "paragraphSpacing": 12
      }
    },
    "body.s": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 400,
        "fontSize": 12.8,
        "lineHeight": 19.2,
        "paragraphSpacing": 12
      }
    },
    "labels.m": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 600,
        "fontSize": 16,
        "lineHeight": 16,
        "leadingTrim": "CAP_HEIGHT",
        "paragraphSpacing": 4
      }
    },
    "labels.s": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 600,
        "fontSize": 12.8,
        "lineHeight": 12.8,
        "leadingTrim": "CAP_HEIGHT",
        "paragraphSpacing": 4
      }
    },
    "labels.xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontWeight": 600,
        "fontSize": 10.24,
        "lineHeight": 10.24,
        "leadingTrim": "CAP_HEIGHT",
        "paragraphSpacing": 4
      }
    }
  },
  "$extensions": {
    "fontConfig": {
      "version": 1,
      "settings": {
        "fontFamily": "Inter",
        "baseSize": 16,
        "ratio": 1.25,
        "roundingMode": "none",
        "roundingDirection": "up",
        "groups": {
          "headings": {
            "label": "Headings",
            "styleCount": 4,
            "startExponent": 6,
            "sizeLabelStart": 3,
            "weight": "700",
            "lineHeightRatio": 1.14,
            "paragraphSpacing": 20
          },
          "body": {
            "label": "Body",
            "styleCount": 3,
            "startExponent": 1,
            "sizeLabelStart": 1,
            "weight": "400",
            "lineHeightRatio": 1.5,
            "paragraphSpacing": 12
          },
          "labels": {
            "label": "Labels",
            "styleCount": 3,
            "startExponent": 0,
            "sizeLabelStart": 0,
            "weight": "600",
            "lineHeightRatio": 1,
            "paragraphSpacing": 4
          }
        },
        "typographyTokenName": "",
        "tokenSeparator": ".",
        "scaleName": ""
      }
    }
  }
}
JSON type
JSON type