1 Thing A Week 1 Thing
A Week

Improving sizing and typography in SkeletonCSS

Week 299.0 — 17th July '23

Quick update on my very basic SkeletonCSS project that serves as a base CSS file I can use for future projects. I've been meaning to revisit how I manage fonts and sizing, I decided to move to a fibonacci sequence for sizing and came across an excellent Twitch stream covering great typography in CSS.

I've now updated SkeletonCSS to take advantage of the sizing scheme I chose and lifted some concepts from the video linked to above. At some point in time, I thought I got REMs vs EMs but I lost that over time and am catching up all over again. I had started using pixel values again, but the project now falls back to base sizes at the root level with REMs for fonts and a custom sizing sequence for everything else.

Last of all, this update brings with it an demo page for SkeletonCSS that you can see over at https://cchana.github.io/SkeletonCSS/.

Oh, almost forgot that I also added text-wrap: balance; to headings which should avoid orphans in titles that wrap!

Next up on my list is colour spaces... not sure how I'll bring them into SkeletonCSS or if I need to but definitely something worth exploring.

More from 1 Thing A Week
« You can find me on Instagram Threads @cchana Looking back at Nike+PHP Using clamp() instead of min() and max() in CSS »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 299.4 – Thursday
    1. Apple slams UK surveillance-bill proposals bbc.co.uk
    2. Songwriting credits since 1958, broken down by gender pudding.cool
  2. 299.5 – Friday
    1. Invisible Details of Interaction Design rauno.me

Jump to notable items for Week #298, Week #300 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit