Reduce twitter bootstrap heading size by ratio

Question

Not sure if this is possible. I think the Twitter Bootstrap heading size is too big. h1 is 36px; h2 is 30px, and so on.

Is there any way to reduce the heading size by ratio? Say I just want 90% of each heading instead. I don't wanna declare each heading's font size one by one.

Thanks.

Answer 1

I realise this thread is over 18 months old now, but in case someone comes across this again, the latest version of Bootstrap (v3.1.1) has all heading font sizes set in the less/variables.less, like so:

@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px

So it's just a case of tweaking the multipliers for each of these to have an affect.

Answer 2

It would be nice if this were possible by tweaking a variable in the LESS, but I don't think it is.

From variables.less:

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor

So you could scale all of the text by changing @baseFontSize, but unfortunately there's no separate @baseHeaderFontSize. You could always fork the project though!

Edit 2: As @merv points out, header sizes are to be based on @baseFontSize from 2.1.2.

Original Edit: It actually looks like the heading sizes are hardcoded anyway: type.less:

h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }