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 !
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@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 ?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@workj,
Try the suggested methods within this thread. If you require further support, create your own thread on the issue.