type.css is a small css module (683 bytes) that is easy to modify or extend to fit your needs. Abstracting your font-sizes into simple single purpose classes targeting individual breakpoints can help improve your sites css performance and reduce code bloat. Adjusting font-sizes and designing around content in the browser becomes easy as sunday morning.
Examples
All breakpoints
Page Title
Secondary Title
I... I don't know... I mean, I'd like to believe that I'm not, but I just... I've just never seen any proof, so I... I just don't debate it anymore. You know, it's like I could spend my whole life debating it over and over again, weighting the pro's and con's and in the end, I still wouldn't have any proof, so I just... I just don't debate it anymore. Heh, it's absurd...
As a vortex forms in dark clouds above his house, Donnie drives into the hills and watches as an airplane descends above. The plane, carrying Rose and the dance troupe, is wrenched violently as one of its engines detaches and falls into the vortex. Events of the previous 28 days recapitulate in reverse order and action, until Donnie finds himself in bed in the early hours of October 2. As he sits laughing uncontrollably, the jet engine crashes through his room, killing him.
- Author name
.f1 { font-size: 4rem; }
.f2 { font-size: 2rem; }
.f3 { font-size: 1.25rem; }
.f4 { font-size: 1rem; }
.f5,
.small { font-size: .85rem; }
Medium breakpoint
Page Title
Secondary Title
I... I don't know... I mean, I'd like to believe that I'm not, but I just... I've just never seen any proof, so I... I just don't debate it anymore. You know, it's like I could spend my whole life debating it over and over again, weighting the pro's and con's and in the end, I still wouldn't have any proof, so I just... I just don't debate it anymore. Heh, it's absurd...
As a vortex forms in dark clouds above his house, Donnie drives into the hills and watches as an airplane descends above. The plane, carrying Rose and the dance troupe, is wrenched violently as one of its engines detaches and falls into the vortex. Events of the previous 28 days recapitulate in reverse order and action, until Donnie finds himself in bed in the early hours of October 2. As he sits laughing uncontrollably, the jet engine crashes through his room, killing him.
Others with whom Donnie had interacted in the 28 days awaken, some looking disturbed. Gretchen rides by Donnie's house and learns of his death from a neighborhood boy (Scotty Leavenworth), but says she did not know him. Gretchen and Rose exchange a glance and wave as if they know one another, but cannot remember where from.
- Author Name
@media only screen and (min-width: 48em) and (max-width: 64em) {
.f1-m { font-size: 5rem; }
.f2-m { font-size: 2.5rem; }
.f3-m { font-size: 1.25rem; }
.f4-m { font-size: 1rem; }
.f5-m,
.small-m { font-size: .85rem; }
}
Large breakpoint
Page Title
Secondary Title
I... I don't know... I mean, I'd like to believe that I'm not, but I just... I've just never seen any proof, so I... I just don't debate it anymore. You know, it's like I could spend my whole life debating it over and over again, weighting the pro's and con's and in the end, I still wouldn't have any proof, so I just... I just don't debate it anymore. Heh, it's absurd...
As a vortex forms in dark clouds above his house, Donnie drives into the hills and watches as an airplane descends above. The plane, carrying Rose and the dance troupe, is wrenched violently as one of its engines detaches and falls into the vortex. Events of the previous 28 days recapitulate in reverse order and action, until Donnie finds himself in bed in the early hours of October 2. As he sits laughing uncontrollably, the jet engine crashes through his room, killing him.
- Author name
@media only screen and (min-width: 64em) {
.f1-l { font-size: 5rem; }
.f2-l { font-size: 2.5rem; }
.f3-l { font-size: 1.5rem; }
.f4-l { font-size: 1.25rem; }
.f5-l,
.small-l { font-size: 1rem; }
}
Both medium & large breakpoints
Page Title
Secondary Title
I... I don't know... I mean, I'd like to believe that I'm not, but I just... I've just never seen any proof, so I... I just don't debate it anymore. You know, it's like I could spend my whole life debating it over and over again, weighting the pro's and con's and in the end, I still wouldn't have any proof, so I just... I just don't debate it anymore. Heh, it's absurd...
As a vortex forms in dark clouds above his house, Donnie drives into the hills and watches as an airplane descends above. The plane, carrying Rose and the dance troupe, is wrenched violently as one of its engines detaches and falls into the vortex. Events of the previous 28 days recapitulate in reverse order and action, until Donnie finds himself in bed in the early hours of October 2. As he sits laughing uncontrollably, the jet engine crashes through his room, killing him.
- Author Name
@media only screen and (min-width: 48em) {
.f1-ns { font-size: 4rem; }
.f2-ns { font-size: 2rem; }
.f3-ns { font-size: 1.25rem; }
.f4-ns { font-size: 1rem; }
.f5-ns,
.small-ns { font-size: .85rem; }
}