I have one piece of (constructive, I hope) criticism: I think it’s odd to use both indentation and an empty line to indicate breaks between consecutive paragraphs. All the English books I’ve seen use indentation, while the blank line is pretty much universal on the web, but I don’t think I’ve seen them mixed before, and as a result I find it harder to tell what’s going on: “is this block of text a new paragraph or some kind of callout or aside?” I think you can make a valid case for using either style, but my experience is that putting them together makes for something that’s harder, not easier, to read.
I must have been reading webpages for so long I didn’t notice, but you’re absolutely right. I’ll make that change.
This is really interesting, thank you. For a long time I have been a user and sometime-contributor to IkiWiki, a static wiki site generator. The original/principal author decided that the default theme for the wiki should be basically no theme, an “anti-theme”. For new wikis I can understand (you need to configure a lot of things, so you might as well configure a theme too), but he extended this decision to the site that forms the “advert” and demonstration of the software itself, namely its homepage. But the anti-theme is so hostile to legibility I really felt that it was a bad decision and could be putting of potential contributors before they’d got started. Unfortunately nobody is sufficiently actively contributing to IkIWiki now and my appeal to revisit that decision, 18 months ago, has gone unanswered. I just posted Typesetter.css there as I felt it’s relevant to that discussion.
I’ve just had a look and legibility for me was very high. This is on an iPhone 8 with Safari. It’s great to not have to press the ‘reading mode’ button on every site.
What kind of browsers / screen sizes make it show legibility issues?
I have a wide monitor and my eyes really can’t track a line of text that well over such a long distance. It also causes me to “miss” the next line when I scan back to the left.
I see. I don’t make my browser full screen on wide displays - not because of this, because it’s rare, but because most sites do their own thing to keep the text to a reasonable width - and therefore there is a lot of wasted space.
Back in the days of Netscape Navigator, I remember setting up the details so that sites without styling would look good to my eyes. If browsers support a default style sheet then it would be good if it had a max width to cater for this. I’d like to publish without CSS and let the user decide how they want content to appear (surely this is a good way to hell with accessibility?) but I’ve seen this problem before.
If you’re talking about ikiwiki.info, then I find it illegible on my iPhone 7 with Safari, which (I think) is the exact same size and ppi as your 8. So to a certain extent it must be in the eye of the beholder.
Your link goes to this Lobsters discussion page. Fixed link: ikiwiki.info
A similar, classless CSS – sakura.
Reminded me of Gutenberg , which aims to make web pages look good printed. But I’ve adapted the styles from it for web purposes before now.
It puzzles me that this kind of project is not more common, in the spirit of the CSS zen garden.
This is great!
Like a better featured, less argumentative, more readable version of this. Great stuff!