Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Patrick Metcalfe
PLUS
Patrick Metcalfe
Courses Plus Student 7,563 Points

Responsive Typography

My first question, are em's only to save you from having to do the math yourself or am I missing something? I understand that it everything is dependent on one constant(base lineheight) then changing that would mean everything scales nicely like:

html {font-size: 100%; } /*1rem=16px*/
p { font-size: 1rem}

@media (max-width: 800px){
    html { font-size: 75%} /*1 rem=12px, the p scales*/
}

but, my second question is, how do you use this to, for example, ensure line-length, scale line-height(mobile devices)? Maybe I'm just thinking (r)em's do more than really do. Thanks for any help.

From what I understand if you use ems and stick to the browser standard of 16px, you have 1em being the equivalent off 16px so if you change a h1 to 2.5em(40px), if you then use a media query on say ipad resolution and change the body to 12px then the h1 would also change to 30px while you not having to change the em value.

The rem differs as the em is relative to its parent but the rem is always relative to the root element on your page so HTML and thus easier to manage. I personally use em for everything including widths and height.

1 Answer

hm only preprocessors like Sass and Compass save you from doing the math on your own. In CSS you would have to do it manually.

The purpose of a unit like em or rem is to set one size in a relation / context to another. And the difference between the two is two what each one refers to:

  • ems refer to the parent selector -> so if you change the percentage font-size in your element selector html all em values will change down the "cascade" accordingly. But you have to keep in mind if you have something like: <h1>Headline <h2>Subline</h2> </h1> and you set h1 and h2 to 2em they will have a different font-size in the browser cuz each of the two em refers to another context.

    • rem always refer to the font-size in the html element -> like with em if you change the percentage font-size in your element html selector all rem values will change accordingly. only difference each element with e.g. 2 rem will have the identical font-size in display no matter in which child parent relation it is - cuz each is based onto the root font-size in html.

and about the application i would take a look at the vertical rhythm module in compass, that covers a good portion of points you've mentioned. that would also take care of changing the line height at breakpoints. basically you just would have to change your baseline (base font size and line height) on important breakpoints. if you push things a bit further you might take a look at the following pull request on github: https://github.com/chriseppstein/compass/pull/1352 and copy the use-baseline mixin to your own project. it isn't committed to the master yet but with its aid you are able to maintain multiple baselines and apply them accordingly to the typography all over your project. at the moment compass is able only to cover a single baseline.

for line-length aka the ideal measure take a look at the following article: http://trentwalton.com/2012/06/19/fluid-type/

and a last word about rems. i would be careful about the usage, not every browser is supporting them properly yet.

cheers