Typetune

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

Language

Do you have a saved config?

Font

Loading Google Fonts catalog...

Scale

Base pxRatioRounding

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

Root nameScale nameSeparator

Token map

Token	Size	Line	Weight	Paragraph
headings.2xl	61.04px	69.58px	700	20px
headings.xl	48.83px	55.66px	700	20px
headings.l	39.06px	44.53px	700	20px
headings.m	31.25px	35.63px	700	20px
body.l	20px	30px	400	12px
body.m	16px	24px	400	12px
body.s	12.8px	19.2px	400	12px
labels.m	16px	16px	600	4px
labels.s	12.8px	12.8px	600	4px
labels.xs	10.24px	10.24px	600	4px

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 typeStandardFigma