4 ms·
The tight line spacing has a negative impact on readability. It’s hard to read long paragraphs of dense body text like this. But the tables and other character
by pavlov 2y ago
The tight line spacing has a negative impact on readability. It’s hard to read long paragraphs of dense body text like this. But the tables and other character graphics require this tight leading.
That’s the problem with using the same character grid for both graphics and text. It could be alleviated with a font that has a particularly low x-height (leaving more margin above and below the letters).
- evanjrowley 2y agoHow does it compare to the tightness of comments here in HN?
- 16bytes 2y agoLooks like HN uses `line-height: normal`, so it would be the same factor of 1.2 times font-size that's used on the Monospace page.
- alberth 2y agoIs it the tight line-height, or just the fact that monospace fonts a more difficult to read than proportional fonts (due to monospace words have a more similar 'shape' than proportional type words)
- cpach 2y agoIMHO it’s the latter.
- 16bytes 2y agoI thought you meant line width and was confused because it's in the generally accepted range (~70 characters). The line height, I agree, is too tight. 19.2px at 16px font size is too cramped at only 1.2x. Making it 24px is a big improvement. To my eye, however, a taller line height doesn't affect the tables and other character graphics. With some tweaks like this I think the monospace style comes across quite well. * edit - I think I see your point; it does break the author's concept of the fixed grid (set line-height: 24px for p elements and turn on the author's "debug mode" to see the grid.
- corytheboyd 2y agoHad the same instant turn off.
- unraveller 2y agoI can't stand monospace for reading, so I made a bookmarklet because all reader modes suck leaving font preference even though this site works fine just changing the normal text tags over to sans-serif. javascript: (function() { (function() { const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th'); textElements.forEach((element) => { const textColor = getComputedStyle(element).getPropertyValue('color'); element.style.fontFamily = 'system-ui, -apple-system, sans-serif'; element.style.WebkitTextStroke = `0.4px ${textColor}`; }); location.hash = ""; history.replaceState("", "", location.pathname); })(); })(); https://caiorss.github.io/bookmarklet-maker/ https://caiorss.github.io/bookmarklet-maker/
- _the_inflator 2y agoDoesn’t work in Netscape Navigator. Joke. Cheers! ;)