CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3font-sizetypography
Jitendra Vyas
Jitendra Vyas

Reputation: 152815

How to change bootstrap typographic measurement in the appropriate way?

Currently Bootstrap 3 used html {font-size: 62.5%;} and then 

body {

  font-size: 14px;
  line-height: 1.42857143;

}

and than px everywhere for typography 

h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}

And in current condition if I want to make default font-size to 16px should I also increase the px size of all heading levels like 36 to 38 for h1 and also change the line-height which is 1.42857143 for 14px font-size

Or I can just change html {font-size: 62.5%;} to something else and no editing required for body, heading and line height

Upvotes: 0

Views: 5206

Answers (3)

apaul
apaul

Reputation: 16180

Just trying a quick test seems to reveal the answer:

Example with: html {font-size: 62.5%;}
Example with: html {font-size: 100%;}

The two examples look exactly the same because font sizes set in non-relative units, like px, will not be effected by changes to a parent element's font-size.

If you would like to have this kind of functionality try using em, like so:

Example with body{font-size: 62.5%;}
Example with body{font-size: 100%;}

CSS using em units:

body {
    font-size: 62.5%;
}
h1, .h1 {
    font-size: 3.6em; /* equal to 36px */
}
h2, .h2 {
    font-size: 3.0em; /* equal to 30px */
}
h3, .h3 {
    font-size: 2.4em; /* equal to 24px */
}
h4, .h4 {
    font-size: 1.8em; /* equal to 18px */
}
h5, .h5 {
    font-size: 1.4em; /* equal to 14px */
}
h6, .h6 {
    font-size: 1.2em; /* equal to 12px */
}

Credible Source:

The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn't cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em.

So why both with all this em business when it's just an abstraction of using pixel values anyway? Three possible reasons:

  1. They ARE resizable in IE 6
  2. The relationship to other sizes (elastic width sites)
  3. Em's cascade like a mo-fo

Excerpt from:
px – em – % – pt – keyword
Published April 16, 2009 by Chris Coyier

I'm guessing this method may be the origin of the html{font-size: 62.5%;} found in your code.

Upvotes: 2

Milo
Milo

Reputation: 58

I think the best way that you can control the typography in Bootstrap responsive design is by using @Media Queries. You have 4 break points in Bootstrap lg, md, sm and xs, so just choose 1 font size for each resolution group.

Upvotes: 0

hnrch02
hnrch02

Reputation: 23

You can use the Customizer to do this with ease. You'll need to manually adjust the line height, but the font sizes for h1..6 are generated based on @font-size-base.

Upvotes: 0

Related Questions