tachyons type scale
Examples
.mega { font-size: 4rem; }
.f1 { font-size: 2rem; }
.f2 { font-size: 1.5rem; }
.f3 { font-size: 1.25rem; }
.f4 { font-size: 1rem; }
.small { font-size: .85rem; }
.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: 1.25rem; }
.f5-ns { font-size: 1rem; }
.f6-ns { font-size: .85rem; }
.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: .85rem; }
.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: .85rem; }
/* ==========================================================================
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: .85rem; }
@include break(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: 1.25rem; }
.f5-ns { font-size: 1rem; }
.f6-ns { font-size: .85rem; }
}
@include break(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: .85rem; }
}
@include break(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: .85rem; }
}
View package on npm