CSS Enhancing Design with CSS Styling Text Line-height and letter-spacing

Dorothy Rhodes
Dorothy Rhodes
5,884 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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
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.

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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
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.

ronnell williams
ronnell williams
5,811 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

Candace Harris
Candace Harris
1,608 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...