Rationale behind font sizes in bootstrap

Question

Here are the header sizes from bootstrap.css:

h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

I was surprised by the fact that these sizes are fractional (half-integers), which suggests that their precision is at least 0.25px (less than 1%).

How do web designers arrive at such sizes? Are they obtained by some scientific process, some calculation perhaps? Or do people simply stare at their site, playing with sizes until it feels right? How can a designer convince his teammate that it really ought to be 31.5px and not just 31px?

Answer 1

They haven’t exactly specified font size 31.5px, instead they specified base font size and coefficients for headings, see code:

// file: variables.less
@baseFontSize:          14px;

// file: type.less
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px

Users of bootstrap are free to customize base font size, if they want to, in their custom builds; font size in heading will change automatically and proportionally, that’s the point.