CODEWITHSUNDEEP
csszurb-foundation
dgivoni
dgivoni

Reputation: 555

Foundation CSS fontsize adjustments best practice?

The default font sizes for h1, h2 etc. are very large in Zurb Foundation 4 framework and we need to have page titles and subtitles that are smaller than that. But what is the best practice here?
Overwrite the css for each of the h1, h2... elements or simply use from h4 and down?

I've read that adjusting the general font-size of the html/body element is not a good solution http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

And I'd rather not have to touch each single element in order to shrink the sizes proportionally for all.

But if we use h4 instead of h1 elements, aren't we affecting the SEO of the page?

Upvotes: 4

Views: 2633

Answers (1)

HP.
HP.

Reputation: 19896

Take a look at these Sass variables and adjust them accordingly.

$h1-font-size: emCalc(44px);
$h2-font-size: emCalc(37px);
$h3-font-size: emCalc(27px);
$h4-font-size: emCalc(23px);
$h5-font-size: emCalc(18px);
$h6-font-size: 1em;

They documented this very well

http://foundation.zurb.com/docs/components/type.html

Upvotes: 1

Related Questions