Font Calculations

[Herb Trevathan]

Is there a reference to how I properly calculate font sizes using WP Jumpstart?

For example if I try to reverse engineer the methods for the H1, H2 etc… I get different results if I divide on into the other and other methods I have tried.

Is there a rembase being used, I do not see it declared, but it looks like the base font size is 12px…

Could you please provide link to support docs or somewhere I can read up on this?

Topic

[Jason Bobich]

Hello Herb,

I’d be glad to explain. — First, do you understand the difference between rem, em, and px?

[Herb Trevathan]

I think I do, which means probably not hahaha : )

[Herb Trevathan]

rem is relative “em” correct

em is used for things like line height, margin and padding right?

pixels will now be a result of a calculation which now equals that of percentage which changes proportionally right?

[Jason Bobich]

Em’s are essentially a percentage the current pixels. So, let’s say you’ve got this:

<style>
.wrapper { font-size: 12px; }
.wrapper h1 { font-size: 2em; }
</style>

<div class="wrapper">
	<h1>Text</h1>
</div>

The h1 is going to be 24px, 200% of the 12px, because 12px is currently what’s inherited to it.

However, this gets complicated when you’re editing a WordPress theme with tons of different nested styles. And this is why with modern browsers we can use rem. Rem’s are always relative to the HTML font-size.

Take this example:

<style>
html { font-size: 11px; }
.wrapper { font-size: 12px; }
.wrapper h1 { font-size: 2rem; }
</style>

<div class="wrapper">
	<h1>Text</h1>
</div>

Now, the h1 is going to be 22px, 200% of 11px on the HTML. The fact that .wrapper has 12px applied to it is now irrelevant.

So this is why we use rem. It means that nothing can come in between the font-size on the HTML and the element you’re styling.

Here’s a more complicated example that shows why em’s can be so confusing:

<style>
.wrapper { font-size: 12px; }
.wrapper .inner { font-size: 2em; }
.wrapper .inner h1 { font-size: 2em; }
</style>

<div class="wrapper">
	<div class="inner">
		<h1>Text</h1>
	</div>
</div>

Now what is the size of the text? It’ll end up being 12px x 2 x 2. You can see how this could be super complicated with a big theme’s stylesheet.

So, to answer your question, you’d look at the html style in the top of Jump Start’s style.css. Then every where you see a “rem” you know it’s a direct percentage of that number always.

[Herb Trevathan]

Thank You,

Here is where I got lost, and it still does not calculate (assuming I am calculating correctly…)

Here is what is in the: Stretch Starter Child Theme: Stylesheet (style.css)

html,
body {
	color: #666666;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 150%;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 130%;
	margin-bottom: .4em;
}
h1 {
	font-size: 27px; /* Fallback for older browsers */
	font-size: 2.3rem;
}
h2 {
	font-size: 24px; /* Fallback for older browsers */
	font-size: 1.85rem;
}
h3 {
	font-size: 18px; /* Fallback for older browsers */
	font-size: 1.4rem;
}
h4 {
	font-size: 14px; /* Fallback for older browsers */
	font-size: 1.1rem;
}
h5 {
	font-size: 13px; /* Fallback for older browsers */
	font-size: 1rem;
}
h6 {
	font-size: 11px; /* Fallback for older browsers */
	font-size: .85rem;
	color: #999999;
	text-transform: uppercase;
}

so I took the H1 pixel size (and assumed that was the target or value being converted => to rem) and divided that by the .html size which would be:

27 divided by 13 which equals 2.08 (2.07692308) so the rem size would be 2.1rem if that was the correct way to calculate…

So off I went through the rest and the error is clearly in that process I am using.

Is there a different way to arrive at the same 2.3rem value that you have in place?

While this seems like a small margin of error, I am aware of the impact of multiple small errors in calculations, and I have been trying to arrive at the same values you have before moving on with font value changes…

Did I miss something?

[Jason Bobich]

I just took off a couple pixels on the fallback for h1. Try doing the math on the others. 😉

h2 — 13px * 1.85 = 24.05 = 24px

h3 — 13px * 1.4 = 18.2 = 18px

h4 — 13px * 1.1 = 14.3 = 14px

h5 — 13px * 1 = 13.0 = 13px

h6 — 13px * 0.85 = 11.05 = 11px

Note that the fallback conversions are only estimates for sake of being easier to edit. For example look at the h4. An old browser is going to display 14px, while a newer browser is going to display 14.3px. So technically these do not match, but that’s all right.

[Herb Trevathan]

Awesome, thank you so much for the clarification : )

[karlo]

Internet provide generators for many things, also rems https://offroadcode.com/prototypes/rem-calculator/ 🙂

[Herb Trevathan]

Good resource. Thank you for sharing.

[Author]

Replies