Hacker News Reader

Comment by mtm7 | Hacker News Reader

I love a good font (and try to use one on my own blog), but part of me gets really giddy when I discover a site with very little styling. It's like I've found some secret oasis that's going to have a high signal-to-noise ratio, or at least some more "raw" writing than you'd find on ${popularNewsWebsite}. Some sites that come to mind:

- https://danluu.com/

- https://100r.co/site/home.html

- https://meagher.co/

- https://macwright.org/

Where Times really shines is printed material. I find it (and Garamond) extremely easy to read.

For longform screen reading, I usually prefer Georgia, Freight Text, Source Serif, and Tiempos. San Francisco is a nice sans-serif font for this, too.

View on HN

If you wander a bit through the Practical Typography site, you'll realize that its whole shtick is being minimal while not looking like it was made in '94. Even the ‘Introduction’ chapter says pretty much this.

The somewhat-recent slew of ‘This is a website’ pages don't come close to PT in terms of just being nice to look at.

Navigating PT for the first time wasn't as easy as the examples given above though.

Links were just plain black with no decoration, making me have to guess at every click what was navigation.

They're plain black but internal links are indicated with small caps and external links with Butterick's odd red degree symbol°. It seems to me to sufficiently distinguish them.

It's enough to distinguish them once you've figured it out, but it's not clear that they're links just from looking at them. I had to hover over them to be sure.

Conventions are useful.

Honestly, I hadn't noticed any of the links in the text. I was merely referring to the links on the front page.

Those red circle links are particularly tricky to spot. You have no idea how many of the words prior to the circle are part of the link, so your best option is to try and click the tiny circle.

I agree with you on the formatting of blogs. For my new philosophy blog[1] I went for hyper-minimal HTML and CSS, statically rendered with Jekyll, no JS at all. As part of that, I had to select a really nice font, since that's basically the only actual styling on the site, so I went for Literara[2], which I recently discovered and am totally enamored with. Besides Bookerly (I have a Kindle), Literata is the hands-down best font I've found for reading on screens.

[1]: http://philosophica.christopherdumas.org [2]: https://fonts.google.com/specimen/Literata?query=liter

Literata was commissioned by Google as the new default font in Play Books, btw.

I actually checked the about page for the first time when posting, and sure enough, you're correct. Google has good font design sense, I guess what with Roboto too. Cool!

Regarding [1], you can simplify it even further by ditching jekyll altogether and writing the html directly.

That's true, but then I'd have to manually list posts, do forward and back buttons, and when I'm writing the articles do all kinds of boiler plate. Plus, markdown is much nicer than Html to write in.

On top of that, Jekyll doesn't add any weight for the client.

I don't know... I've been bitten three times by jekyll updates breaking my site in the worst moment. Thus I replaced it by a makefile that concatenates the appropriate html headers into the stuff I write. Couldn't be happier/more relaxed.

I have a friend that wants to use Makefiles as a build system for his website, C macros as the templating engine for the HTML, and a JS->C library so his WebAssembly C can access the DOM. Hence, he wants to write his web apps in C lol!

Sorry, the mentioning of Makefiles brought that back. In any case, you might be right, but it's a very simple website and Jekyll is easier. I'll cross the bridge of incompatibility when I come to it. Thanks for the heads up though!

> C macros as the templating engine for the HTML, and a JS->C library so his WebAssembly C can access the DOM. Hence, he wants to write his web apps in C lol!

Websites in C are alright, but this sounds like a crazy setup.

In my case, there is no C and the makefile does only "cat header.html $^ footer.html > $@"

Those (almost) all do reasonably well where most “minimalist” sites fail, accessibility. Many developers seem to get a kick out of “not caring about design”, as some sort of point of pride, but at the same time put in just enough CSS to screw over the visually-disabled.

HN, for instance, can’t be zoomed in iOS.

Also, the above macwright cuts off the titles to make room for the Dates, so to me the site looks like:

Rec...2020-06-01

Sec...2020-05-10

Link...2020-05-02

Rec...2020-05-01

What other parameters should be prioritized while developing websites before compromising accessibility for minimalism?

I’m not sure I understand the question. Are you asking what a designer should consider more important than compromising accessibility for minimalism? Pretty much anything...

> HN, for instance, can’t be zoomed in iOS

Both pinch-to-zoom and increasing font size work for me in iOS Safari, what zoom are you talking about?

Using the font menu in the address bar to change the scaling should increase find size and reflow the text to fit in that size. Currently it just zooms in a. la. pinching. It works correctly on the home page, but not in a comments page.

It works fine up to 125% for me, but then it just zooms when you increase to 150%.

Thanks for identifying that issue. I'll try to find a solution for folks who are using iOS + increased font sizes. It's going to be a little tricky, so if anyone has found a solution let me know - I haven't been able to find a way to reliably detect text size adjustments on iOS and the truncation behavior is desired at smaller font sizes. Definitely will try and find a way to make it work.

Okay, I couldn't find a way to change the layout when text size is controlled so I'll change it for all viewers if they're using a small device (under 640px wide, scaled). It works in my testing on an iPhone, but let me know if it works for you!

https://5ed7d94981b55b0008f07a3b--macwright.netlify.app/

Are you still using Hugo? I'm thinking about trying Gatsby .

I only use Jekyll for macwright.org - haven't really used Hugo or Gatsby much.

Looks good, thanks!

> [...] part of me gets really giddy when I discover a site with very little styling.

You can set your preferred font families in your browser's settings that would be used exactly in case of "no page author font preference". (You can even tweak default sizes, and even default colours, but setting wildly unusual default colours just reveals flaws in most author styles, so are not very practical, unfortunately.)

It is quite widely known fact (I think) but probably very rarely used feature; sorry for 'mansplaining' -- I bet you all know this and I would not be surprised if some of fellow HN readers even have non-default settings in there.

> I usually prefer Georgia [...]

What a coincidence, I read HN (and Wikipedia) in Georgia font, but not because of default browser settings, but because of site-specific user styles. I like my browser to be real "user agent".

I wonder if Times New Roman would look better on an extremely high resolution screen, or if there's something else that would have to change in how we produce screens. (Increased contrast, or the lack of a backlight, for example.)

Microsoft was aggressively hinting its fonts to align with screen pixels, so perhaps they might've done that with the licensed TNR too? Not sure if they did that to third-party fonts, especially before Verdana & co. And for some reason TNR on my Mac is credited to Microsoft & Monotype, which suggests that the same decisions are inherited (though Wikipedia says the Windows and Mac versions differ at least in ligatures, or differed at some point).

Hacker News is almost minimalist in the same vein. What's its font though? It's pretty nonoffensive.

Verdana

Edit: scratch this, forgot about the ‘HN Enhancement’ extension.

I see Helvetica Neue with fallback to Arial, and I checked that it's not my CSS.

Verdana is pretty crappy for texts of even a comment length, as it's wide as heck. I have to hack it out with CSS on sites that I use regularly, or the eye gets tired in minutes.

On news.ycombinator.com? It's Verdana, Geneva, sans-serif

https://news.ycombinator.com/news.css

    font-family: Verdana, Geneva, sans-serif;

Wide is good, it improves readability. If you want a narrower version of the same font, try Tahoma.

As a more readable version of Times New Roman, I like Georgia. It too was commissioned by Microsoft as a web font.

No need to improve readability if it's already fine. Verdana is appropriate at small sizes—in, say, image captions. At ‘normal’ sizes, it just m a k e s t h e e y e m o v e a l o t.

And I don't need to choose between the hyper-tight Helvetica and a bunch of MS fonts from the 90s, because thankfully the world is not limited to them.

A couple other designs I love.

https://lucumr.pocoo.org

https://http2.info

https://dwell.com (not text only but good use of imagery in a non distracting way.)

I love everything dan luu does.

To add to on-screen text - Calibri, Bahnschrift and Roboto have come out as my personal favorites. Of course some people prefer serif to non-serif and that's completely a subjective choice as well.

I’m not well versed in typography by any means, but isn’t long form reading and sans-serif a contradiction in terms?

In my estimation, legibility is as much a function of familiarity as anything.

I think the degree to which serifs aid legibility is overstated. Any studies are likely biased through familiarity of serif fonts by test subjects, since that’s what most printed reading material used.

Reply on news.ycombinator.com