Tachyons

Docs

/

Typography

/

Type Scale

Version
2.0.0
Filesize
191 B
Declarations
24
Selectors
25
Max. Specificity Score
10
Size of Avg. Rule
1

Often times - websites devote a non-trivial amount of css to setting the font-size of elements. They also declare an unnecessary amount of different font-sizes that don't even come close to resembling a sane type scale.

To create and design an easily readable interface, you don't need more than six font-sizes and thus you don't need much CSS. There are six font-sizing classes to choose from. Using the class extension namespaces you can set the font-size for any particular breakpoint that you desire.

Don't spend time constantly overriding font-sizes in your css. If you don't like a default font-size for an element, use the utilities to quickly see the type larger or smaller until it looks just right.

Examples

Sample text with the mega class

Sample text with the f1 class

Sample text with the f2 class

Sample text with the f3 class

Sample text with the f4 class

Sample text with the f5 & small classes

Previous

Images

Next

Measure

Reference

MDN - Font-size
src/_type-scale.css

/*

   TYPE SCALE

*/

.mega  { font-size: 4rem; }
.f1    { font-size: 2rem; }
.f2    { font-size: 1.5rem; }
.f3    { font-size: 1.25rem; }
.f4    { font-size: 1rem; }
.f5,
.small { font-size: .875rem; }

@media (--breakpoint-not-small){
 .mega-ns { font-size: 4rem; }
 .f1-ns {   font-size: 2rem; }
 .f2-ns {   font-size: 1.5rem; }
 .f3-ns {   font-size: 1.25em; }
 .f4-ns {   font-size: 1rem; }
 .f5-ns {   font-size: .875rem; }
}

@media (--breakpoint-medium) {
 .mega-m { font-size: 4rem; }
 .f1-m {   font-size: 2rem; }
 .f2-m {   font-size: 1.5rem; }
 .f3-m {   font-size: 1.25rem; }
 .f4-m {   font-size: 1rem; }
 .f5-m {   font-size: .875rem; }
}

@media (--breakpoint-large) {
 .mega-l { font-size: 4rem; }
 .f1-l   { font-size: 2rem; }
 .f2-l   { font-size: 1.5rem; }
 .f3-l   { font-size: 1.25rem; }
 .f4-l   { font-size: 1rem; }
 .f5-l   { font-size: .875rem; }
}


Docs

General

Debugging Images