Scale Settings

Line Height

Preview Font

Actions

Scale Preview

Minor Third: 1.2Base: 16px
xs0.694remLH: 1.5011px
The quick brown fox jumps over the lazy dog
sm0.833remLH: 1.5013px
The quick brown fox jumps over the lazy dog
base1remLH: 1.5016px
The quick brown fox jumps over the lazy dog
lg1.2remLH: 1.5019px
The quick brown fox jumps over the lazy dog
xl1.44remLH: 1.5023px
The quick brown fox jumps over the lazy dog
2xl1.728remLH: 1.5028px
The quick brown fox jumps over the lazy dog
3xl2.074remLH: 1.5033px
The quick brown fox jumps over the lazy dog
4xl2.488remLH: 1.5040px
The quick brown fox jumps over the lazy dog

Generated Code

CSS Variables
:root {
  /* Typography Scale: Minor Third (1.2) */
  /* Base: 16px */

  --text-xs: 0.694rem;
  --text-xs-lh: 1.042rem;
  --text-sm: 0.833rem;
  --text-sm-lh: 1.25rem;
  --text-base: 1rem;
  --text-base-lh: 1.5rem;
  --text-lg: 1.2rem;
  --text-lg-lh: 1.8rem;
  --text-xl: 1.44rem;
  --text-xl-lh: 2.16rem;
  --text-2xl: 1.728rem;
  --text-2xl-lh: 2.592rem;
  --text-3xl: 2.074rem;
  --text-3xl-lh: 3.11rem;
  --text-4xl: 2.488rem;
  --text-4xl-lh: 3.732rem;
}
SCSS Variables
// Typography Scale: Minor Third (1.2)
// Base: 16px

$type-ratio: 1.2;
$base-size: 1rem;

$text-xs: 0.694rem;
$text-xs-lh: 1.042rem;
$text-sm: 0.833rem;
$text-sm-lh: 1.25rem;
$text-base: 1rem;
$text-base-lh: 1.5rem;
$text-lg: 1.2rem;
$text-lg-lh: 1.8rem;
$text-xl: 1.44rem;
$text-xl-lh: 2.16rem;
$text-2xl: 1.728rem;
$text-2xl-lh: 2.592rem;
$text-3xl: 2.074rem;
$text-3xl-lh: 3.11rem;
$text-4xl: 2.488rem;
$text-4xl-lh: 3.732rem;
Tailwind Config
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      'xs': ['0.694rem', { lineHeight: '1.50' }],
      'sm': ['0.833rem', { lineHeight: '1.50' }],
      'base': ['1rem', { lineHeight: '1.50' }],
      'lg': ['1.2rem', { lineHeight: '1.50' }],
      'xl': ['1.44rem', { lineHeight: '1.50' }],
      '2xl': ['1.728rem', { lineHeight: '1.50' }],
      '3xl': ['2.074rem', { lineHeight: '1.50' }],
      '4xl': ['2.488rem', { lineHeight: '1.50' }],
    },
  },
};
JSON
{
  "scale": "Minor Third",
  "ratio": 1.2,
  "baseSize": 16,
  "unit": "rem",
  "sizes": {
    "xs": {
      "size": "0.694rem",
      "lineHeight": "1.042rem"
    },
    "sm": {
      "size": "0.833rem",
      "lineHeight": "1.25rem"
    },
    "base": {
      "size": "1rem",
      "lineHeight": "1.5rem"
    },
    "lg": {
      "size": "1.2rem",
      "lineHeight": "1.8rem"
    },
    "xl": {
      "size": "1.44rem",
      "lineHeight": "2.16rem"
    },
    "2xl": {
      "size": "1.728rem",
      "lineHeight": "2.592rem"
    },
    "3xl": {
      "size": "2.074rem",
      "lineHeight": "3.11rem"
    },
    "4xl": {
      "size": "2.488rem",
      "lineHeight": "3.732rem"
    }
  }
}

Scale Reference

Minor Second
1.067
Subtle, minimal contrast
101111
Major Second
1.125
Classic, traditional feel
101113
Minor Third
1.2
Balanced, versatile
101214
Major Third
1.25
Strong hierarchy
101316
Perfect Fourth
1.333
Bold, impactful
101318
Augmented Fourth
1.414
Dramatic contrast
101420
Perfect Fifth
1.5
Very bold, headline-focused
101523
Golden Ratio
1.618
Natural harmony, aesthetic appeal
101626

Typography Tips

1.2

Minor Third

Best for body-heavy content like blogs and articles. Provides subtle size differences that work well with long-form reading.

1.33

Perfect Fourth

Ideal for most web projects. Creates clear hierarchy without being too dramatic. Popular choice for marketing sites.

1.618

Golden Ratio

Based on natural proportions found in nature. Creates aesthetically pleasing scales but can be too aggressive for some designs.

rem

Use rem Units

rem units respect user's browser font size settings, improving accessibility. Set your base size on the html element for consistency.

Need Help with Typography?

Brix340 designs beautiful, readable websites with carefully crafted typography that enhances your brand and improves user experience.

Get a Free Consultation

Rate this tool