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 Enhancing Design with CSS Styling Text Line-height and letter-spacing

Posted by Dorothy Rhodes
Dorothy Rhodes
6,304 Points

Is it okay to change the root font size?

I learned elsewhere that changing the root font-size is not a good practice, since it can have unintended consequences. For example, if someone has changed their browser's default font size for accessibility purposes, hard-coding a root font-size might prevent the site from loading according to the user's settings. Is that right?

4 Answers

Anwar Montasir
STAFF
Anwar Montasir
Treehouse Teacher
Anwar Montasir
Anwar Montasir
Treehouse Teacher

Hi Dorothy, that's a really good question, and even though I've studied accessibility I don't recall coming across this question before.

In researching your question, the clearest recommendation I've come across is in the article 5 Keys to Accessible Web Typography by Matej Latin. The article says

The best practice is to set the font-size on the html using % (or any other relative unit), and then set all the other elements to either em or rem which will be relative to the body size.

Unfortunately, this means that I handled this incorrectly in this course. Instead of 

html {
  font-size: 20px;
}

a more accessible approach would be 

html {
  font-size: 125%;
}

or 

html {
  font-size: 1.25em;
}

since that would better respect the user's preferences.

It may be a bit before I can make corrections to this video. Thanks so much for pointing out the issue.

Thomas Bathurst
Thomas Bathurst
1,576 Points

So wouldn't this also apply for the letter-spacing value?

Instead of:

.title {
letter-spacing: 1px;
}

shouldn't we be using:

.title {
letter-spacing: 0.05rem;
}
Anwar Montasir
STAFF
Anwar Montasir
Treehouse Teacher
Anwar Montasir
Anwar Montasir
Treehouse Teacher

Hi Candace, good question. The way I approached styling the text in this video was

h1, h2 {
  font: 400 4rem/1.1 'Abolition Regular', Impact, Charcoal, sans-serif;
}

This means that as of this selector, both the h1 and h2 have the following styles:

font-weight: 400;
font-size: 4rem;
line-height: 1.1;
font-family: 'Abolition Regular', Impact, Charcoal, sans-serif;

Then, underneath that, I override the size of the h2 element.

h2 {
  font-size: 2.5rem;
}

Now the h1 is larger than the h2.

If that's confusing, another approach would be to define the h1 and h2 separately using the font shorthand:

h1 {
  font: 400 4rem/1.1 'Abolition Regular', Impact, Charcoal, sans-serif;
}

h2 {
  font: 400 2.5rem/1.1 'Abolition Regular', Impact, Charcoal, sans-serif;
}

Both would be equally valid and produce the same results.

Candace Harris
Candace Harris
1,609 Points
Candace Harris
Candace Harris
1,609 Points

Why make the H1 and H2 font the same size when you shorthand it? I'm confused by this. By selecting both H1 and H2 in the shorthand doesn't that make both headings the same size of 4 rem? Maybe I'm missing something, please help...

ronnell williams
ronnell williams
15,660 Points
ronnell williams
ronnell williams
15,660 Points

yes because that is the main font and you could change it to anything you want. you could maybe change the backup if the root doesn't work but yes in a way. But be careful when changing it because you could mess up the whole program