keyrow's blog

A Small Update

2025-11-03

Before anything else, I'd like to first say that I have practically no experience with actual website code. The closest I've ever gotten is using Hugo (a static site generator) elsewhere, and the only code I even tweaked were some color values in a theme. Basic stuff.

Quick Recap

When I created this blog, I had used Zola's quickstart tutorial. However, I ended up dumbing down the templates even more until I was left with just:

With this setup, I won't need to define the page/section template in the markdown frontmatter, which makes my writing experience just a little bit nicer. Perhaps this will bite me in the butt later when I make this blog a little more complicated, but until then, I'll be keeping things simple.

Styling

My first priority right now is just to make the blog a little nicer to read. This involves two steps:

  1. Changing the font (I just dislike serif fonts)
  2. Limiting the number of text per line

This is also my first proper experience with writing CSS from scratch, and oh boy has it changed since I was first introduced to it.

Wait, but you might be wondering:

Zola supports SASS, so why are you using CSS?

Well, the sole reason I initially rolled with SASS was because I desperately wanted variables, and when I was first introduced to CSS, variables weren't supported at all. I thought about how annoying it would be to write themes and immediately noped. However, after some more recent quick googling, I found out that a lot of SASS features have since appeared in CSS. Turns out variables in CSS are pretty much usable everywhere now.

Anyway, now on to the actual work of styling.

Fonts

Going into this, I already knew that I wanted to use Inter for this blog. This is because:

Now, the question becomes: "How do I use fonts in a website?"

Quick googling of CSS fonts tells me I'm pretty much just hoping that:

And if I don't want to risk it, I should just pick something from a list of web safe fonts (among which Inter was not found) or I could rely on Google Fonts instead. However, I wasn't really a fan of this since I don't want to rely on a 3rd party for a feature as small as ensuring that my site has a nice font.

Ideally, I could include the font as part of my website, which means it would pretty much always be available to the end user, but I was worried about the size of fonts because fonts have tons of glyphs, right? Well, I checked the filesize of the woff2 version of InterVariable, and... it was 378.9 KiB. KiB!! I guess that's vector graphics and compression for you.

Anyway, now the issue is "how do I host fonts?". Turns out, I just needed to google "CSS custom fonts", which tells me that it's also possible to host the fonts I want as part of my blog. Great!

@font-face {
  font-family: "Inter Variable";
  src : url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
}

p, h1, h2, h3, h4, li {
  font-family: "Inter Variable";
}

And now my site uses Inter :D

Text Per Line

For me, this is the main readability upgrade. HTML, without theming, just wraps text based on the width of ther user's display. On my computer, this means that a single line of text can contain up to around 285 letters, which I find pretty darn hard to follow. Quick googling once again tells me that the goal to aim for is about 75 characters per line, although there's additional nuances.

To hit a nice compromise, I'll be going for:

In other words, I just want the line length to be between 60-70 characters, with higher being better. Now, implementing this in CSS is as simple as using max-width and clamp() in a class and passing that to an HTML element that contains all the content.

.content {
  max-width: clamp(60ch, 70ch, 70ch);
}

...Wait, that doens't look right.

Bonus: Margins and Centering

Turns out, after implementing what I did above, all the text just gets piled up on the left side of the screen. Ouch. Well, how do I fix this? By googling "how to center a div", of course!

Well, I was pleasantly surprised to find out centering a div is no longer a tedious thing to do. Hooray!

This tutorial was pretty much a one-stop-shop for my needs: just adding a margin-inline: auto; pretty much does the trick. However, I noticed that when screen space is tight (such as in the case of a mobile screen), the margin can pretty much go to 0. I don't really like that, since I know that phone cases can sometimes get in the way of the side of the screen a little bit, potentially obscuring some text. Therefore, I wanted at least a little bit of a gap between the edge of the text and the edge of the screen. Luckily, max() makes this a pretty trivial tweak... or so I thought. Turns out, that's not how margin-inline works.

I ended up just resolving this by adding a 1ch padding on the HTML element, inspired by this Stack Overflow answer. This is probably going to get in my way when I start working on the header, but whatever.

We now have this:

.content {
  max-width: clamp(60ch, 70ch, 70ch);
  margin-inline: auto;
}

html {
  padding: 1ch;
}

and it's starting to look like a proper site now!

Bonus: Font Sizing

While reading up on "text per line" good practices, I generally also came across readability tips in general, which include font size suggestions. When it comes to default text size:

Looking up stuff for this is a little overwhelming because there's a bunch of articles that suggest a single base font size that remains consistent across devices, and there's others which suggest all kinds of scaling methods to make sure all devices has the "perfect" font size.

For now, I'll use somewhat of a balance between the two: 16-18px font size using clamp() again, such that bigger screens get 18px and smaller ones get 16px...

...or at least that's how I expected it to go. Turns out, if you use clamp() and put a value using absolute units (such as pixels) in the "preferred" field, the output of clamp() will never change. I ended up using "vw" units (viewport width) and some playing around to get the intended effect.

html {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5rem;
  padding: 1ch;
}

(The reason I've styled the html component is because now all my other font sizes can be derived from this base font size by using the "rem" unit.)

Yes, I snuck in a small line-height change too, since I noticed the text getting a little too tight vertically.

And we're done! NOT!!

My goodness, the UI/UX rabbit hole goes deep...

But I think that's enough for one post haha, so I'll continue another time! See you then!