1 Jan 2022
Details
I published this site redesign last month knowing it was imperfect, and I’ve finally returned to it to fix all the little details that weren’t great.
Typography
I changed up my typography with the redesign, which was cool and fun at first, until I realized some problems:
- The visual hierarchy among H1/H2/H3 was off, especially on smaller screens.
- Hatton, my title font, didn’t look good at smaller sizes because of how thin it is.
- Using Hatton for two heading levels felt too much, like using an accent colour too many times.
![Similar headings 1 and 2.](/img/2021/12/site_notes-old.png)
![Heading 2 is a strong serif, heading 3 is a thin display font.](/img/2021/12/site_media-old.png)
![Heading 3 is a strong serif, heading 2 is a thin display font.](/img/2021/12/site_h2-h3-comparison.png)
Changes
- Use Hatton only for H1 page titles, and shifted all of my heading styles up a level.
- H1: Hatton
- H2: Tiempos Headline
- H3: Inconsolata
- H4: Tiempos Text, italic + bold
- Use the variable font file for Hatton, and adjust the weight depending on font size. Smaller font size → heavier weight, to compensante for the reduced readability of its size.
- Larger screens:
font-weight: 200
- Smaller screens:
font-weight: 250
- Larger screens:
![Heading 1 is a thin display font, and heading 2 is a strong serif but sized down.](/img/2021/12/site_notes-new.png)
![Heading 2 is sized down significantly.](/img/2021/12/site_media-new.png)
![Heading 3 is a monospace font, heading 2 is a strong serif.](/img/2021/12/site_h2-h3-comparison_new.png)
Drop Shadows
I discovered this post by Josh W Comeau on creating better shadows with CSS box-shadow a while back, but didn’t get around to implementing it until now. It’s wonderful.
![Black drop shadow using default CSS styling.](/img/2021/12/site_shadows-before.png)
![Softer dark pink drop shadow with more depth.](/img/2021/12/site_shadows-after.png)