search

programble / writ

Opinionated, classless styles for semantic HTML
https://writ.cmcenroe.me
ISC License
464 stars 13 forks source link

Modular scale in headlines #13

Closed jonathanhefner closed 9 years ago

jonathanhefner commented 9 years ago

Have you considered using modular scale in your headlines? Here are a few handy calculators if you'd like to play around with sizes:

For a base font size of 14-16px, I think a ratio of 1.2 (a "minor third") yields nice results. That would imply the following sizes:

h1 { font-size: 2.488em; }
h2 { font-size: 2.074em; }
h3 { font-size: 1.728em; }
h4 { font-size: 1.44em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }
causal-agent commented 9 years ago

I played around with minor third and major second scales a bunch, but I found that the headings got too large too quickly, or there wasn't enough difference between them (in major second). I ended up going with the heading sizes GitHub uses when rendering Markdown.

causal-agent commented 9 years ago

Upon increasing the font-size to 16px, I find the minor third heading sizes look much better.

lh2013 commented 9 years ago

Thank you for all of your input. I am taking a course and the details you have given help me better understand what I am doing.

On Fri, Aug 28, 2015 at 7:04 PM, Curtis McEnroe notifications@github.com wrote:

Closed #13 https://github.com/programble/writ/issues/13 via 7d621d9 https://github.com/programble/writ/commit/7d621d9aec030e231c06055bc01f827919e28552 .

— Reply to this email directly or view it on GitHub https://github.com/programble/writ/issues/13#event-395555760.