Chris’ Corner: Kagi Blog Typography

I’ve been using Kagi for search for the last many months. I just like the really clean search results. Google search results feel all junked up with ads and credit-bereft AI sludge, like the incentives to provide a useful experience have been overpowered by milking profit and a corporate mandates on making sure your eyeballs see as much AI as possible.

I’m also not convinced Google cares about AI slop. Like do they care if a movie review for Predator: Badlands was written by a human after actually watching the movie, or if Gemini farted out a review because the LLM knows basically what a movie review reads like. Me, I sure would like to know. So I’m pleased with Kagi’s SlopStop idea.

But I’ve managed to start this column with something I didn’t even really intend to talk about.

Naturally, I’d like to talk about the typography one Kagi’s blog (follow that SlopStop link).

Look at those single words at the end of both of those headers. Looks off. I can’t remember if those are “widows” or “orphans”, but upon looking it up, it’s neither, it’s a “runt” (lol).

Obviously we can’t have that.

One option is to text-wrap: balance; on the headers. Here’s what that looks like:

Ehhhhhhhhh. Also not ideal. It makes those headers like half the width of the available space. Balancing is just way nicer with center-aligned headers. Which actually makes me think of how style queries should work with arbitrary styles…

h1, h2, h3, h4 {
  /* doesn't actually work, style 
     queries only work on 
     --custom-properties */
  @media style(text-align: center) {
    text-wrap: balance;
  }
}

Whatever — let’s not balance here anyway, let’s try text-wrap: pretty; (which lacks Firefox support). There we go:

Better. The pretty values does a bunch of stuff, and runt-protection is among them.

Honestly though it’s the line-height that bugs me the most. It’s just too much for a big header. Let’s bring it in and even pull the letters a little bit with negative letter-spacing.

Now we’ve got to fight hierarchy and organization a bit. All the text is pure black… fine. Everything is about the same distance away from each other… that’s a little weird. So we’re just leaning on text size and weight (and one little instance of italic).

I think we bring in just a smidge more to help here. Kagi has a wonderful little dog logo, we bring her in on the title so it sets it apart. The nav can set inline with the title. We use the nice yellow brand color to better set the title and date, then let it ride.

They should probably just get a CodePen account to work this stuff out right?