Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Patrick Metcalfe
PLUS
Patrick Metcalfe
Courses Plus Student 7,563 Points
Posted by Patrick Metcalfe
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.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

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

Ralf Koller
Ralf Koller
4,506 Points

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