27 ms·

I'm currently using the 'minor third' scale on my site muxup.com (mainly because I didn't know what scaling to use and I saw it in use somewhere else). It seems

by asb 3y ago

I'm currently using the 'minor third' scale on my site muxup.com (mainly because I didn't know what scaling to use and I saw it in use somewhere else). It seems fine, but I've found the headings aren't visually distinct enough if they're not right next to each other (i.e. it's hard to visually distinguish a h2 at 2.488 rem vs an h3 at 2.074rem). Perhaps I've chosen a bad scale, or perhaps I should be adding other visual markers to help distinguish the heading level?

surprisetalk 3y ago
I see a lot of cool sites in your HN profile! Which one are you talking about?
- asb 3y ago
  Edited to explicitly mention muxup.com - you won't see any current articles using nested headings (i.e. h3 in addition to h1 for the article title and h2 for article headings) as every time I've used one I've not liked how hard it is to differentiate, and haven't invested the time in revisiting the CSS to fix it.
  - surprisetalk 3y ago
    Love that rounded font! And the site looks great. I just changed an H2 tag to an H3, and it looks like your H3 is way too small. One thing I've seen for H3 and below is to use `font-style: italic` and font-weight 500 to distinguish it from the H2. I don't think that would work for your site though. For your site, you could maybe throw a `color: #444` on H3 and below? You can also try `h1, h2 { margin-left: 1em }`.
    - asb 3y ago
      Ah, that's because my static site generator only includes "needed" CSS directives, so if the page doesn't have h3 then this isn't included (I know, classic premature optimisation): h3 { font-size:2.074rem } Playing with font weights or color is a good suggestion, thanks.
john-doe 3y ago
Some good advice: https://practicaltypography.com/headings.html#:~:text=Certain https://practicaltypography.com/headings.html#:~:text=Certai...
- chazeon 3y ago
  > It’s fine to make the point size bigger, but just a little. Use the smallest increment necessary to make a visible difference. If your text is set in 12 point, you needn’t go up to 14 or 15 point. Try a smaller increase—to 12.5 or 13 point. This is great advice. This is exactly what i think so many web design failed to follow, e.g. bootstrap.

by asb 3y ago

surprisetalk 3y ago

I see a lot of cool sites in your HN profile! Which one are you talking about?

asb 3y ago
Edited to explicitly mention muxup.com - you won't see any current articles using nested headings (i.e. h3 in addition to h1 for the article title and h2 for article headings) as every time I've used one I've not liked how hard it is to differentiate, and haven't invested the time in revisiting the CSS to fix it.
- surprisetalk 3y ago
  Love that rounded font! And the site looks great. I just changed an H2 tag to an H3, and it looks like your H3 is way too small. One thing I've seen for H3 and below is to use `font-style: italic` and font-weight 500 to distinguish it from the H2. I don't think that would work for your site though. For your site, you could maybe throw a `color: #444` on H3 and below? You can also try `h1, h2 { margin-left: 1em }`.
  - asb 3y ago
    Ah, that's because my static site generator only includes "needed" CSS directives, so if the page doesn't have h3 then this isn't included (I know, classic premature optimisation): h3 { font-size:2.074rem } Playing with font weights or color is a good suggestion, thanks.

john-doe 3y ago

Some good advice: https://practicaltypography.com/headings.html#:~:text=Certain https://practicaltypography.com/headings.html#:~:text=Certai...

chazeon 3y ago
> It’s fine to make the point size bigger, but just a little. Use the smallest increment necessary to make a visible difference. If your text is set in 12 point, you needn’t go up to 14 or 15 point. Try a smaller increase—to 12.5 or 13 point. This is great advice. This is exactly what i think so many web design failed to follow, e.g. bootstrap.