Changing Metro Theme Title – H1

Community Forums Forums Design Tips and Tricks Changing Metro Theme Title – H1

This topic is: resolved

This topic contains 12 replies, has 5 voices, and was last updated by  Pinky 2 years, 8 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #22430


    Working with most StudioPress themes, I can change the font size of the post title – by affecting the size of H1 by editing:
    font-size: 48px;


    For some reason – when I work with the METRO theme – this does not work.  And I must change the size of H1 by editing:
    font-size: 3rem;


    Why is this?  What is REM?  Call me curious, I guess.  But it took me forever to figure this out by trial or error – and I am suspicious that I may be causing changes to other things other than the Post Title (H1)

    Thanks in advance for answering this for me…..





    Post a link to your site please.

    You’ll need to change both the Pixel and REM values to match the new size.

    02 Typography
    	This section covers font colors, families, size, styles and weight.
    	This style sheet uses rem values with a pixel fallback.
    	The rem values are calculated per the examples below:
    	10 / 16 =		0.625rem
    	12 / 16 =		0.75rem
    	14 / 16 =		0.875rem
    	15 / 16 =		0.9375rem
    	16 / 16 =		1rem	
    	18 / 16 =		1.125rem
    	20 / 16 =		1.25rem
    	24 / 16 =		1.5rem
    	30 / 16 =		1.875rem
    	36 / 16 =		2.25rem
    	42 / 16 =		2.625rem
    	48 / 16 =		3rem
    	Further reading on the use and compatibility of rems:
    <a href="" rel="nofollow"></a>
    <a href="" rel="nofollow"></a>



    I had a question as well in regards to Font sizes and H1 tags in the Metro theme. After reading Gary’s post I want to verify something.

    The H1 tag is automatically the Title right? (want to be sure for SEO purposes)

    If I wanted to change the H1 font size I have to edit both pixel & rem values.

    For the subtitles/subheads I would select H2, etc..

    Just want to make sure H1 is the title. If I select H1 for the subtitles the font size is the same as the title.




    h1, .entry-title, .entry-title a, #title {
        font-family: ‘Oswald’,sans-serif;
        font-size: 2.25rem;

    On the single posts & pages yes. The archives can be different.

    .metro-custom h2 a, .metro-custom h2 a:visited {
        color: #464646;

    I use h3 for sub headings.



    I have edited both the pixel size and the rem size of H1 to fit the title size I like.  I like H1 being my title re: SEO.

    I think I selected 42 pixels and 2 rems.

    It is a bit trial and error you know – I think the pixels is more for the IE users.  I think the rem size change gets reflected with other browsers such as IOS, Safari, Firefox, etc.

    Looking back – at my past StudioPress themes even the new ones (Eleven40) do not indicate a value at all for REM – so this must be a new value going forward for CSS and font sizes.

    Thanks for the feedback.





    42 / 16 = 2.625rem

    Read this:

    I think you have the rem wrong.

    It depends on the base.



    Thanks Brad,

    Any particular reason you use H3 for subheads?




    Because thats the way its supposed to be. You don’t use h1 or h2 in the body of the content. They are used for the title on the archives pages and single posts and single pages.



    “…I think you have the rem wrong.  It depends on the base….”

    So Brad – If I wanted to decrease the title font – I should edit the pixel value to multiples of 16 (where the base is 16 in this example of METRO)

    OR –

    Are you saying – Given the values in the CSS table (see below) – I should choose a pixel value that appears in the chart.  Such as

    (not 32 pixels – but) 30 pixels

    This is confusing.  Can I not pick a rem value that does not appear in the chart?  (i.e. 32 pixels and 2rem)

    10 / 16 =       0.625rem
        12 / 16 =       0.75rem
        14 / 16 =       0.875rem
        15 / 16 =       0.9375rem
        16 / 16 =       1rem
        18 / 16 =       1.125rem
        20 / 16 =       1.25rem
        24 / 16 =       1.5rem
        30 / 16 =       1.875rem
        36 / 16 =       2.25rem
        42 / 16 =       2.625rem
        48 / 16 =       3rem

    *edited to format code in line with the forum guidelines



    Firstly gh5649. Please show a little bit of respect and read this

    Specifically about how to display code.


    Brad Dalton



    Oopss.  Sorry ’bout that.





    Hi, I’m new to WordPress but not so new to web design and have been using Dreamweaver / html/css. So when editing my wordpress sites I know where to add the css div id and classes but not sure where to add the html part because I don’t know much php. What I want to do at this time is add some text/maybe address and phone number in the uppper right of my header section like this page I found.. and my logo in the left of the header. I’ve tried putting some html in the widget area but It didn’t do anything.



    Tracy can you please start a new thread with your question/s and a link to your site



Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.