modify 2012 stylesheet WordPress
- SOLVED
Hi, I'm trying to learn - get a handle on rem font sizing in wordpress 2012 so that I can use it in future themes.
While I think the concept is good, I can't get my head around the calculations they've used based on rembase: 14 and line-height of 24 And don't have time to get open the calculator for every small tweak.
The job here is easy, but I don't have the time to do it. I just would like someone to modify a default 2012 theme stylesheet to change it to a $rembase of "10". and maybe a line height of 20 (not sure if that's correct but it will be easier to build from) - and modify the rem numbers in the stylesheet to match (11px would be 1.1rem, etc..) wherever rem is used in 2012. The end result should look relatively the same but it doesn't have to be exact, or even pretty - I'm more interested in the math than the style.
I think a rembase of 10 would allow me to still use the feature going forward in a faster more friendly way.
Thanks for saving me the time to do this.
Answers (3)
Duncan O'Neill answers:
You also want to set the line-height? Following from the above, I've copied and pasted the code from the twentytwelve theme's style.css, on line 480, and commented changes;
/* Body, links, basics */
html {
font-size: 62.5%;/* changed from 87.5%, 14px */
}
body {
font-size: 10px; /* was 14px */
font-size: 1.4rem;
line-height:2rem;/* line-height not specified in the original, this would set it to 20px */
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
At the risk of starting a religious war, there are reasonably good reasons not to set a 10px body font-size, partly because it means styling every element;
http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/
Connie Taylor comments:
Hi Duncan, nice to talk with you again. I understand what you are saying, but 2012 pretty much styles every element anyway with ridiculously rem numbers out to 9 decimal places including the padding and such they are also basing on the rembase. The very opposite of user friendly.
Just out of curiosity - can't rem values be inherited?
I can actually deal with the fonts easier as the px size fallbacks are there but would still need to do the calculations for the 14rem numbers. I definitely don't have the time to get a calculator out and figure out what all the paddings and line-heights are set to out to nine decimal places. I was hoping someone here could simplify it all so I could edit it without all the math. Open to suggestions.
Am currently sticking with px, percent and em but do want to stay up with the times. Job will stay open for a bit hoping for an easier way to modify it.
Duncan O'Neill comments:
Hi Connie,
Yes, it's been a while...
As I understand it, rem values are relative to the root ( html element ) where em values are relative to the parent; [[LINK href="http://snook.ca/archives/html_and_css/font-size-with-rem"]]http://snook.ca/archives/html_and_css/font-size-with-rem[[/LINK]], which is actually quoted in the style.css.
For what it's worth, I use ems and percentages.
Without having looked at it, I think someone else has gone through, and offered you an edit of style.css
If you're comfortable with the system you're used to, you could always use a decent text-editor to do a search and replace to get rid of all the rem values. In which case the fall-back would be px.
best,
Connie Taylor comments:
will read through that - your resources are always great. I will probably end up using a combination of both and naveen's changes will give me a start on that. Thank you for your input - as always great help.
Naveen Chand answers:
Hi Connie,
I guess I have saved the time for you ;) I have changed the rem values and line-height values in the entire stylesheet with a rembase of 10 and line-height of 20. Extensively used Excel to get the values. Changed over 175 remvalues and around 65 line-heights.
Here is the code in paste-bin: [[LINK href="http://pastebin.com/zZFCtzaK"]]http://pastebin.com/zZFCtzaK[[/LINK]]
You can check for arithmetic accuracy.
(Formula used remvalue = font-size/$rembase; line-height=$line-height/font-size;)
Also, I think 20 line-height is okay. I have rechecked with [[LINK href="http://www.pearsonified.com/typography/"]]Golden Ratio Typography Calculator by Pearsonified[[/LINK]] with these values: font-size:10 and content-width:480. The output it gave is 19. So I guess 20 is still okay with slight margin of error.
Connie Taylor comments:
Thank you very much Naveen - as I said it would just save a lot of time while getting to learn the new way and I can graduate to more complex calculations later.
Monit Jadhav answers:
I think the link below can help you
http://snook.ca/archives/html_and_css/font-size-with-rem
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */