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
Reference
MDN - Font-size
/*
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; }
}