10/29/2015 ~ 1 min read

Moving a legacy code base towards better typography ...


I think I can use this in my current project. Yay! Simple Little Things.

/* Document level adjustments */ html { font-size: 17px; } @media (max-width: 900px) { html { font-size: 15px; } } @media (max-width: 400px) { html { font-size: 13px; } } /* Modules will scale with document */ .header { font-size: 1.5rem; } .footer { font-size: 0.75rem; } .sidebar { font-size: 0.85rem; } /* Type will scale with modules */ h1 { font-size: 3em; } h2 { font-size: 2.5em; } h3 { font-size: 2em; }

From one of the masters: https://css-tricks.com/rems-ems/ And if you are using sass, run

$ bower install sass-rem -S

on your command line. The -S is a shortcut to save the dependency. now you can generate font-size rems with fallbacks. The project is here: https://github.com/pierreburel/sass-rem.


Headshot of Matthew Hippely

Hi, I’m Matthew. I live in Ventura County, and spend my time thinking about systems, software, and how things evolve over time.

You can find me on GitHub, LinkedIn, or read more about me here.