H1 h2 h3 h4 h5 h6 font size scale

Support
#1

Hi,
The default font size settings in Ethos for headings are

h1 400%
h2 285.7%
h3 228.5%
h4 171.4%
h5 150%
h6 100%

I know I can change them, and I know how, but I’m interested to know how your designers came up with that particular scaling to start with. Can someone tell me what type of font scale was used to arrive at those figures? I can’t figure out the relationship between them.

For example, headings are often scaled up by multiplying the size of the previous one by something like 1.250 (Major Third), or 1.333 (Perfect Fourth) or 1.618 (Golden Ratio), or using a Fibonacci Series.

How did you arrive at those particular font sizes?

Just interested to know. Pro is an excellent theme, by the way. Well done all, and many thanks.

#2

Hello @markwattchow,

Thanks for writing to us.

Percents are also scalable like ems. However, 100% is equal to the current font size. Let’s tale an example 1.5em is 1.5 times larger, and 150% is 150 percents of the font size. Percents are also good for smaller devices or mobile responsive because of their scalability. However, they do cascade like ems.

Except for points, all of the units above are good choices for front end web development. Ems and percents are particularly good for smaller devices or mobile responsive.

Hope it helps
Thanks

#3

Hi,

Thanks, but you have misunderstood the question. I’m not talking about font size units (px, ems, rems, %). I am talking about font sizes and the relationship between them. I am wondering how your graphic designer came up with those particular heading sizes, rather than a different set of heading sizes.

For example, typographers and graphic designers often use a scale to come up with a harmonious set of heading sizes (such as at this site: https://type-scale.com/). They may use a ratio of 1.250 (Major Third) to get the following (each step up is multiple of 1.250):

h1 305.2%
h2 244.1%
h3 195.3%
h4 156.3%
h5 125%
h6 100%

Or the Golden Ratio (1.618) to get the following (each step up is a multiple of 1.618):

h1 1108.9%
h2 685.4%
h3 423.6%
h4 261.8%
h5 161.8%
h6 100%

Or (in theory, because they’d probably be too big to use) you could multiply each step up by 2 to get the following:

h1 3200%
h2 1600%
h3 800%
h4 400%
h5 200%
h6 100%

Using a mathematical ratio or relationship between the sizes helps them look harmonious on the page. My question is a graphic design question, not a coding question. How did your graphic designer come up with your default sizes? What is the relationship between them?

Thanks

#4

Hey Mark,

Regretfully, this area of the theme was not discussed with us, the support staff, so we couldn’t answer your question. But, I’ll pass this along to our dev team maybe they have an idea.

#6

Hey Mark,

Regretfully, our development team doesn’t have an idea what design rule the heading scaling was taken.

There’s a plan to make the headline sizes to be adjustable so you easily change the headline scaling to the design rule you want. Just note that I do not guarantee that such plan would be implemented though.

#7

No worries! Thanks for trying to find out. I was just interested to know.

A place to make headline sizes easily adjustable would be good, though I can do this through Global CSS easily enough.

Again, many thanks for all your efforts on Pro. Great theme.

#8

You are welcome @markwattchow

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.