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

Design Web Typography Final Project: Create a Typographic Site Getting Started: HTML and CSS

Mike Bronner
Mike Bronner
16,395 Points
Posted by Mike Bronner
Mike Bronner
16,395 Points

[Note] Bootstrap May Reset Your Base Font-Size

Anyone using Bootstrap themes may notice that the font sizes are way too small when going through this excersize. The problem here is that Bootstrap may reset the font-size using the following CSS:

html { font-size: 62.5%; }

To "re-reset" the font-size to the desired behavior, add the following above the body styling in YOUR CSS file (which you include after the Bootstrap CSS file, of course):

html { font-size: 100%; }

After that, everything works as described in the video. I didn't notice this at first, as I was following along using a Bootstrap project I am working on, and it threw me for a little loop, until I noticed that Bootstrap is changing the defaults.

2 Answers

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

Hi Muhammad: another update. I just created a brand new project with only Bootstrap 3.2.x, and it does have the following declarations in bootstrap.min.css:

html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}

So it looks like Bootstrap is resetting the fonts after all.

Mattox Shuler
Mattox Shuler
Treehouse Guest Teacher
Mattox Shuler
Mattox Shuler
Treehouse Guest Teacher

Yeah, I would recommending removing that code from Bootstrap or changing it like you mentioned to a simple declaration of font-size: 100% for responsive and accessibility purposes.

Muhammad Mohsen
PLUS
Muhammad Mohsen
Courses Plus Student 10,843 Points
Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Just wondering, Where did that 62.5% came from?

in bootstrap.css 

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

This may have been on a previous version (3.1.x?) of Bootstrap, I'm not in front of my comp at the moment but will check it out as soon as I get back.

Update: thanks for having me double-check this, Muhammad. It appears to be a setting from older Bootswatch themes. Forgot that I had that running on top of Bootstrap as well. :) Will update my original post to reflect that.

Mattox Shuler
Mattox Shuler
Treehouse Guest Teacher
Mattox Shuler
Mattox Shuler
Treehouse Guest Teacher

The 62.5% number came from changing the default font-size from of 1em = 16px to 10px (16 x 0.625 = 10). to create easier math with ems and rems. So 1em would now equal 10px, 1.7em would 17px and so forth. I chose not to highlight this method in the course as media query widths (for example @media (max-width: 100em) ) ignore this, and reset back to the 16px default on some browsers. It just seemed like the method was more work that it was worth.

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

Thanks for the insights, Mattox! That makes sense. And as you note, it seems much easier just to work off the given browser size of 16px and apply that consistently.