16px
Inter
Add larger or smaller text styles to your scale
🎨 Font Weight Settings
H1
1.1
H2
1.2
H3
1.3
H4
1.4
H5
1.4
H6
1.4
Body
1.6
Caption
1.4
Small
1.3
📤 Export Format
H1
Step: 3 • Weight: 500, 600, 700, 800 • Line Height: 1.1 • Size: 31.25px
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
The quick brown fox jumps over the lazy dog
700
The quick brown fox jumps over the lazy dog
800
H2
Step: 2.5 • Weight: 500, 600, 700, 800 • Line Height: 1.2 • Size: 27.95px
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
The quick brown fox jumps over the lazy dog
700
The quick brown fox jumps over the lazy dog
800
H3
Step: 2 • Weight: 500, 600, 700 • Line Height: 1.3 • Size: 25px
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
The quick brown fox jumps over the lazy dog
700
H4
Step: 1.5 • Weight: 500, 600, 700 • Line Height: 1.4 • Size: 22.36px
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
The quick brown fox jumps over the lazy dog
700
H5
Step: 1 • Weight: 500, 600 • Line Height: 1.4 • Size: 20px
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
H6
Step: 0.75 • Weight: 500, 600 • Line Height: 1.4 • Size: 18.91px
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
Body
Step: 0 • Weight: 400, 500 • Line Height: 1.6 • Size: 16px
The quick brown fox jumps over the lazy dog
400
The quick brown fox jumps over the lazy dog
500
Caption
Step: -0.25 • Weight: 400, 500, 600 • Line Height: 1.4 • Size: 15.13px
The quick brown fox jumps over the lazy dog
400
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
Small
Step: -0.5 • Weight: 400, 500 • Line Height: 1.3 • Size: 14.31px
The quick brown fox jumps over the lazy dog
400
The quick brown fox jumps over the lazy dog
500
💻 Generated Code
/* CSS Typography Scale */
.h1-500 {
font-size: 31.25px;
line-height: 1.1;
font-weight: 500;
font-family: Inter, sans-serif;
}
.h1-600 {
font-size: 31.25px;
line-height: 1.1;
font-weight: 600;
font-family: Inter, sans-serif;
}
.h1-700 {
font-size: 31.25px;
line-height: 1.1;
font-weight: 700;
font-family: Inter, sans-serif;
}
.h1-800 {
font-size: 31.25px;
line-height: 1.1;
font-weight: 800;
font-family: Inter, sans-serif;
}
.h2-500 {
font-size: 27.95px;
line-height: 1.2;
font-weight: 500;
font-family: Inter, sans-serif;
}
.h2-600 {
font-size: 27.95px;
line-height: 1.2;
font-weight: 600;
font-family: Inter, sans-serif;
}
.h2-700 {
font-size: 27.95px;
line-height: 1.2;
font-weight: 700;
font-family: Inter, sans-serif;
}
.h2-800 {
font-size: 27.95px;
line-height: 1.2;
font-weight: 800;
font-family: Inter, sans-serif;
}
.h3-500 {
font-size: 25px;
line-height: 1.3;
font-weight: 500;
font-family: Inter, sans-serif;
}
.h3-600 {
font-size: 25px;
line-height: 1.3;
font-weight: 600;
font-family: Inter, sans-serif;
}
.h3-700 {
font-size: 25px;
line-height: 1.3;
font-weight: 700;
font-family: Inter, sans-serif;
}
.h4-500 {
font-size: 22.36px;
line-height: 1.4;
font-weight: 500;
font-family: Inter, sans-serif;
}
.h4-600 {
font-size: 22.36px;
line-height: 1.4;
font-weight: 600;
font-family: Inter, sans-serif;
}
.h4-700 {
font-size: 22.36px;
line-height: 1.4;
font-weight: 700;
font-family: Inter, sans-serif;
}
.h5-500 {
font-size: 20px;
line-height: 1.4;
font-weight: 500;
font-family: Inter, sans-serif;
}
.h5-600 {
font-size: 20px;
line-height: 1.4;
font-weight: 600;
font-family: Inter, sans-serif;
}
.h6-500 {
font-size: 18.91px;
line-height: 1.4;
font-weight: 500;
font-family: Inter, sans-serif;
}
.h6-600 {
font-size: 18.91px;
line-height: 1.4;
font-weight: 600;
font-family: Inter, sans-serif;
}
.body-400 {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
font-family: Inter, sans-serif;
}
.body-500 {
font-size: 16px;
line-height: 1.6;
font-weight: 500;
font-family: Inter, sans-serif;
}
.caption-400 {
font-size: 15.13px;
line-height: 1.4;
font-weight: 400;
font-family: Inter, sans-serif;
}
.caption-500 {
font-size: 15.13px;
line-height: 1.4;
font-weight: 500;
font-family: Inter, sans-serif;
}
.caption-600 {
font-size: 15.13px;
line-height: 1.4;
font-weight: 600;
font-family: Inter, sans-serif;
}
.small-400 {
font-size: 14.31px;
line-height: 1.3;
font-weight: 400;
font-family: Inter, sans-serif;
}
.small-500 {
font-size: 14.31px;
line-height: 1.3;
font-weight: 500;
font-family: Inter, sans-serif;
}