Changing Metro Theme Title – H1

[gh5649]

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.....

Gary.

 

[Brad Dalton]

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:
	
	http://caniuse.com/rem
	http://snook.ca/archives/html_and_css/font-size-with-rem
	

---

Tutorials for StudioPress Themes & WooCommerce.

[triggers]

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.

Thanks,

Deb

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes & WooCommerce.

[gh5649]

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.

gh

 

[Brad Dalton]

42 / 16 = 2.625rem

Read this:http://wpsites.net/web-design/font-rem-pixel-sizes/

I think you have the rem wrong.

It depends on the base.

---

Tutorials for StudioPress Themes & WooCommerce.

[triggers]

Thanks Brad,

Any particular reason you use H3 for subheads?

Deb

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes & WooCommerce.

[gh5649]

"...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
1.875rem

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

[Brad Dalton]

Firstly gh5649. Please show a little bit of respect and read this http://www.studiopress.community/faq/

Specifically about how to display code.

Thanks

Brad Dalton

---

Tutorials for StudioPress Themes & WooCommerce.

[gh5649]

Oopss.  Sorry 'bout that.

gh

 

[Tracy]

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.. http://spectrumlandscapingmn.com/ 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.

[Pinky]

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

---

cheers

Pinky

[Author]

Posts