Twenty Twelve How to increase font-size without making page wider

Do not edit the Twenty Twelve theme. It is will be the default theme in WordPress 3.5 and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

Hi esmi

Thanks for your advise on using child theme, but that doesn’t answer my question.

My intention is not to edit the 2012 directly, I’m eager to know the right way ( what the pro would do ? )to increase font-size of 2012 while keeping the page’s width exactly the same (as is).

So, with childtheme, how do you go about making 16px base font-size version of 2012 without affecting the width ?

Thanks !

To which selectors are you applying the font to and which elements do you want affected?

Hi Andrew Nevins

I want the base font-size to increase from 14px to 16px, meaning the font-size property of all the elements should scale up by (16-14)/14 =0.142857143

It’s been known that the advantage of using rem for font-size is this, you only change font-size of body and everything else ( in rem ) will be taken care of, right ?

BUT the page’s width(s) of 2012 are assigned in rem and I don’t know how to go around this – I only want font-size to increase, I do not want page’s width(s) to increase ( the widths outside and inside media-queries should stay as is.)

Thanks a lot !

I, too, would like to an answer to this question.

(And — yes — I am working with a theme child, not the theme itself)

@paulwp Can you post the CSS you are attempting?

Hi Andrew

please look around line 450 ( style.css of 2012’s trunk )

I tried changing this

html { font-size: 87.5% }

to this

html { font-size: 100% }

and it works as intended ( font-size of the whole site is now based on default 100% = 16px ) but it comes with unwanted side-effect, the page’s width increase, when i look into the css I found out that the width is tied to the rem, so it seems there is no way to change 2012’s base font size from 87.5%=14px to 100%=16px without increasing page’s width ?

There must be a way to make this change without having to delete (re-declare in child theme ) the max-width value of max-width: 68.571428571rem in media queries, am I right ?

As it’s apparent declarations of font size will not work without affecting the page width in the HTML element, have you instead declared font sizes to individual elements? The long way around?

To those who want to change base font size of 2012 from 14px to 16px without expanding the page’s width : don’t change font-size property of html do it in body instead.

body { font-size: 16px; }

but only some elements will be affected, and some won’t ( because they are explicitly declared its own font-size with specific class already ), so you will lose the vertical rhythm because of this.

The other way is to change font-size for all elements like what Andrew suggested, or change(re-declare) the page’s width property below in media queries bit (because of the mobile-first thingy.)

Anyway, I still believe that changing base font size of 2012 from 14px to 16px would be easy, because of the power of rem, but maybe I know too little about css.

I can neither change body font-size nor html fonz-size to change the default font size of 2012. It is strange!

@workj,

Try the suggested methods within this thread. If you require further support, create your own thread on the issue.