WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Twenty Twelve How to increase font-size without making page wider (12 posts)

  1. paulwpxp
    Font hero
    Posted 1 year ago #

    Hi all,

    How to increase base font-size from 14px to 16px ( also scale up the header - H1,H2,H3 and so on ) without expanding the page's width ?

    Twenty Twelve use rem for page's width, so if I increase the font-size in html from 87.5%(14px) to 100%(16px) I will end up page wider than 960px which is not what I want.

    Thanks !

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    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.

  3. paulwpxp
    Font hero
    Posted 1 year ago #

    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 !

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    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 !

  6. cinemaminima
    Member
    Posted 1 year ago #

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

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

  7. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    @paulwp Can you post the CSS you are attempting?

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    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 ?

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    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?

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  11. workj
    Member
    Posted 1 year ago #

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

  12. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    @workj,

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic