Black Friday Sale! Get up to $40 off GP Premium!Learn more

Font size default in EM instead of PX

Home Forums Support Font size default in EM instead of PX

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #168874
    Paul

    Hi Tom,

    After using GeneratePress a few times now, one big frustration with the mobile responsive design of this theme I’m having is the fact that font sizes are set in PX by default. As a responsive theme, font sizes should be declared in EM units instead. Any way you could to this for the next major update? I would take a lot of the hassle out of getting the desktop version of a site design looking super-sweet on mobile devices.

    Cheers,
    Paul

    #168876
    Tom
    Lead Developer
    Lead Developer

    Hi Paul,

    I thought about this when I was originally creating GP, and didn’t think the theme was big enough for it to make a big difference on mobile.

    For example, you can just use a little piece of code and adjust the body size:

    @media (max-width: 768px) {
        body {
            font-size: 16px;
        }
    }

    Doing that will change most of the text on the site except for navigation and headings, which can also be altered.

    You can of course use EMs in your CSS as well.

    Making the change now would mean thousands of users would lose their font settings, so it’s kind of a tricky one.

    Let me know if you need more info 🙂

    #168882
    Paul

    Hi Tom,

    Mobile is everything these days. Any chance you could add a checkbox in the typography section of the customizer that is set to PX by default but could be changed by the user to specify global font sizing in EM units instead? I’m already doing what you suggested above, but it’s a real hassle to manually set breakpoints for all the various mobile, tablet, and desktop viewports on the market these days.

    Cheers!

    #168889
    Tom
    Lead Developer
    Lead Developer

    Any chance you can share what you’re doing with EM units in your custom CSS currently? It will give me a better idea of usage 🙂

    #168927
    Paul

    Hey Tom,

    Here is what I’ve got going so far in terms of custom mobile breakpoints: http://pastebin.com/YG1N4fVj

    I’m using VW units in this example for H1 and H2 headings, but I still need to add the REM units I want to use on body text throughout the site. I am using several different font sizes in various sections of the site, and getting these to look good across a diverse range of mobile devices is challenging when working in PX only.

    Oh, I BTW, I meant to say, ‘can you make an option for REM units’ (not EM). I prefer REM because it’s relative to the font sized set for the body rather than each separate element. This way, all we need to do is set the body font size in the mobile breakpoints CSS and the rest of the special font sizing takes care of itself.

    Cheers,
    Paul

    Paul

    #168950
    Tom
    Lead Developer
    Lead Developer

    Hi Paul,

    So out of all of that, this is what would apply to GP:

    .main-title {
        font-size: 45px;
    }
    
    .site-description {
        font-size: 18px;
    }
    
    h1, 
    h1.entry-title, 
    h2.entry-title {
      font-size:4vw;
    }
    
    .secondary-navigation .menu-toggle, 
    .secondary-navigation ul li a  {
        font-size: 17px;
    }

    When I created the add-on, I figured giving people complete control over something they understand (px) was a better idea than giving them control over something only few understand (em and rem).

    I also figured since there’s only a handful of areas you adjust, it wouldn’t make a massive different for mobile.

    Either way, I’ll definitely take a look and see if there’s a way I can implement this in an easy to understand way using the Customizer 🙂

    #518386
    Julia

    Just make it EMs 🙁

    Typography Best Practices

    If people are asking, why not give the option to change to EMs?

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.