24 ways

Fun! But a heavy emphasis on doing things by eye. Personally I prefer the results of following stricter rules extracted from print typesetting. A few examples:

- I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes.

- I've never heard of there being a rule for how much space goes above a paragraph (this is a funny thing about web typography, since in print you indent the paragraph so there's no additional space). But I guess I'd consider it correct from a vertical rhythm standpoint to either use the line height or half of it.

- Regarding vertical space between lines, what I've heard is you want to make the spacing between lines visually appear greater than the space between words. As far as I know this is just done by eye. (I.e., so the rule is to choose a leading that makes your space between lines appear larger than the space between words.)

- I think there are exact header sizes that are better than picking an arbitrary font size that seems to look big enough. The trick I use here is to take the [traditional point scale](https://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4/) and convert it to a ratio relative to 12 point. This is a way to bake historically refined font ratios into your design.

- Personally, when choosing margins I'd use a [grid system](https://practicaltypography.com/grids.html), which will give you an exact gutter…

"Vertical Rhythm" => keeping ALL text aligned vertically, regardless of where it is on the page or the element type. All text is anchored to integer multiples of a basic vertical distance unit, which (If I remember correctly) is the distance between the baselines of the smallest font-size that to be used.

"baseline" => The line the text 'sits' on, which defines the "origin" of the letters vertically. (at least in the greater Latin-based family of languages). The lowercase letters generally span the distance (of one "x-height" or "ex" in CSS) between the "baseline" and the "median". Some letters (including most capitals) extend higher to a hight higher than the median, and some letters have "descenders" that extend below the baseline. The point is that the baseline is the fixed point of reference we use when drawing the letters (i.e. cursive handwriting, which usually returns to the baseline between letter.

The idea of using these concepts in page layout is based on the idea that the pattern-matching our brain does to parse our vision is always trying to find signal everywhere. Therefor, if we help it a bit by putting EVERYTHING - as measured from the anchors the brain uses - into a simple pattern, it will be recognized faster. To accomplish this you have make it so interval between the baselines of the normal body-text continues (perhaps as a multiple of that interval) into the h[1-6], li, custom divs, everything. You should be able to lay hypothetical ruled paper over…

I've been experimenting with SQLite FTS as a way of adding search to an otherwise static site.

The big advantage of SQLite FTS is that it's really cheap to run. The index is a single static file on disk, then you add a Python process (I'm using https://github.com/simonw/datasette ) to run queries against it. Much less resource intensive than running Solr or Elasticsearch.

It also works surprisingly well - I've run FTS queries against tables that are up to around 10GB on disk and performance is great.

It's no way near as featureful as Lucene, but for small to medium sized projects it's easily good enough.

As for deployment: if the SQLite .db index file is small enough you can bundle it up as part of a static deployment, e.g. bundled in a Docker container. I've done this using Heroku, Google Cloud Run, https://fly.io/ and Zeit Now (aka Vercel).

If the content lives in a git repository you can hook up CI (or a GitHub Action) to build and publish a new copy of the SQLite index on every change.

I've started thinking of this pattern as a kind of static-dynamic site: there's dynamic server-side code but it's running in read-only containers, so you can scale it up by running more copies and if anything goes wrong you just restart the container.

https://til.simonwillison.net/ is my most recent site to use this pattern, see https://github.com/simonw/til for how it works.

I also wrote this tutorial describing the pattern a while ago:…

You're conflating web site and web app which I specifically called out. If you're building the new great gig delivery app, using the same API for a mobile app and web app isn't a big deal.

My issue, and I think a serious issue with the web today, is all of the essentially static content treated like it has the same needs as some web app. Your gig delivery app needs to represent the instantaneous state of the database back end. Your blog post does not.

JavaScript-based "sites" are often little better than the Flash sites they've replaced. They're often inaccessible, opaque to search engines, break linking, and are also opaque to microbrowsers [0]. For every site that relies on JavaScript but doesn't have those problems there's dozens that do.

[0] https://24ways.org/2019/microbrowsers-are-everywhere/

It's a very understandable worry :) Writing rules that when they fail just go into server error logs is sub-optimal at best. The real solution would be Google allowing per-site AMP de-registration, but that's a fantasy I bet.

This is a good article on Apache URL rewriting, if you want to go down that path: https://24ways.org/2013/url-rewriting-for-the-fearful/

I believe in your use case you want to transform `all/urls/of/any/sort/that/end/in/amp/` and simply redirect to everything minus the `/amp/`, so the rewrite rule shouldn't be too bad to write (and test).

I wouldn't use the "might work" in my comment since I wrote it without even seeing if the regex works, but if you get an Apache test domain running off your blog you can test the redirect rules in isolation before putting them on your blog.

> if everything was high contrast, everything would be SCREAMING AT YOU FOR ATTENTION

Simply not true. There's many more factors besides contrast that determine attention focus.

See this excellent series on gestalt principles of design:
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
(it's five parts you need to click to get to the other 4)

Also see http://24ways.org/2007/typesetting-tables which shows a very nice way of adding structure to a table using contrast, instead of making everything scream for attention equally. (Additionally, the site used a different layout when this article was written in 2007, and currently it seems 24ways is a good example of low-contrast crappy readability :) )