Justification of 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 that these sizes are fractional (half-integer), which suggests that their accuracy is not less than 0.25px (less than 1%).

How do web designers come to this size? Are they obtained by any scientific process, perhaps some kind of calculation? Or do people just look at their site, playing with sizes, until they feel good? How can a designer convince his teammate that it really should be 31.5px , not just 31px ?

Answer 1

They do not have the exact specified font size of 31.5px, instead they indicated the size of the base font and the coefficients for the headers, 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 

Bootstrap users are free to adjust the size of the base font, if they wish, in their custom builds; the font size in the title will change automatically and proportionally, that is, a dot.