Nice to see we're getting there again and that people care about typography.
Yet, the optical margin correction looks mechanistic and only concerned with symbols, not with characters:
The "Y" at the start of the first line doesn't move a bit, even though it's clearly optically too light on the left. The next three lines all start optically pretty heavy with a bar. So I'd nudge to "Y" to the left.
I think it's just a pity that LaTeX with microtype is still the pinnacle of automatic typesetting, after all these years. I really enjoy good typography, but the Web, App and even Desktop world seems not to care about such details, apart from a few programs like Ableton.
> Desktop world seems not to care about such details
My free, open-source, desktop text editor, KeenWrite, integrates my quote curling typographic library, KeenQuotes. KeenQuotes curls straight single quotes, double quotes, swaps in the multiplication symbol, corrects low opening double quotes (,,), and handles numeric primes, all while respecting code blocks. KeenWrite replaces some ligatures, but proper ligatures need to account for etymology, which has no simple solution. (Aside, even curling straight quotation marks properly requires part-of-speech processing.)
KeenWrite[1] exports to text, XHTML, or PDF files. Architecturally, the XHTML format doubles as an XML format that is passed to ConTeXt[2] for typesetting into PDF. ConTeXt developers care deeply about typography.
I think this package can reduce readability. The content under Before looked better than the After to me. For example, it changes the word "duplex" to "du-plex" split over two lines, which is less readable.
> I think it's just a pity that LaTeX with microtype is still the pinnacle of automatic typesetting, after all these years. I really enjoy good typography, but the Web, App and even Desktop world seems not to care about such details, apart from a few programs like Ableton.
I have only a tyro's appreciation for typography, so please forgive my uninformed question. Is it a pity that LaTeX+microtype is the pinnacle of automatic typesetting because it's not good enough, or because it's non-web-focused and there is no web analogue of equivalent quality?
It's a pity I feel because microtype is from 2004. That's 20 years ago. Yet, typesetting on the web is still ... not there? I think there's a lot of potential untapped.
Also, the full feature set of microtype is only supported with (Pdf)LaTeX, but not with the newer XeLaTex, meaning that in order to get your favourite fonts to work with PdfLaTex, you have to do a hilarious amount of work to translate an OTF font into specific cuts in MetaFont, the LaTeX font format, and so on.
I mean, I understand that things get pretty tricky once you try to integrate such schemes into a font renderer. There's other scripts than just Latin, with probably very different rules, there are different font sizes, text sizes, etc. A lot of variables to take into account. A lot of variables that were constants when typesetting on a page. So the problem is now more complicated than in the past.
Be aware that this appears by default to swap character pairs with unicode ligatures, which is fine, but those characters aren't included in many web fonts.
It's better today (both for the above issue and also for usability) to disable the ligature substitution and let browser engines manage ligature replacement.
This also breaks naive/literal search. For an example, copy and paste the "After" text into VSCode and try to search for "taking", "coladas", or "Exhibits". It won't match because of the ligatures.
Browser search can typically parse Unicode ligatures, so it's not a huge usability problem. But saving, copying, or scraping the output and using tools that don't process ligatures into their component letters will fail.
This also (very slightly, but still notably) abuses empty contentless <span>s to inject space through CSS margins.
Also, the attempt to brute-force small caps by applying a font subset via a span doesn't work at all for me, in either Chrome or Firefox.
It's a good effort, but I also can't think of a use case where the result is worth what this does to the markup.
Sorry if I'm sounding harsh, but do people aside from hardcore typographists really care about this and similar font/text tweaking projects? I felt no noticeable difference in readability in either of the modes and for a second I even thought the before example is the "better" version they are advertising because it felt more streamlined in my eyes.
Maybe this might help people with dyslexia but don't proper dyslexia focused fonts and aids exist already?
I was a hardcore book reader in the first part of my life, and reading on the web keeps hurting my eyes. Every typography mistake triggers me the same way a grammar one does. I'd love to have such a tool to fix typography on the fly for every webpage, including in French.
I am by no means a typography expert, nor is it a major focus of mine. I have however spent a lot of time reading non-technical prose, and I had a visceral reaction to your comment because of how wrong it seemed. To me the after is so obviously better it struck me as though you were somebody who had never done much deep reading and mainly consumes code or short-form text.
Now, I am completely aware there is nothing behind this other than my visceral reaction. I do not know you at all. I share it only to communicate that to somebody with my background it is an obvious and fundamental improvement.
One way to gain a different perspective could be to ask a similar question, but replace typographic adjustments with something in your domain of expertise that requires deeper experience to see the value in. Assuming programming, it might be things like linting, refactoring, testing, version controlling, etc.
Linting, refactoring and testing all have obvious benifits for anyone who has done any small to medium sized project and has had to rewrite and debug some amount of code, even if they don't know the concepts by name. Even version contolling is ubiquitous in almost any entry-level programming job, even if it wasn't before.
Most people who have made a website with CSS before would at best change the font size, the line spacing and the font face and tweak it to a point that feels easily readable and call it a day. Introducing variable widths between the characters of the font, digraphs and so on feels like more like exercising artisanship that only the experts would see value in rather than solving a technical problem.
Perhaps advanced web design/typesetting is the main application of this and it has a chance of inducing a better subconscious effect on the viewer. Sort of how magazines and books were designed back in the day I suppose.
And the answer is still no. Users / visitors don't care. We keep writing tools for ourselves and products, UIs, UXs, etc. *from the user's POV* aren't any better.
No one wakes up in the morning, looks in the mirror, and says, "I want to use an application build with React, has no tech debt, and has great commit msgs...".
I'm not suggesting the tech and stack don't matter. They do. But they are a means, not the ends. The sad fact is, the ends aren't - from the users' POV - noticeably better. More bloated? More buggy? Probably.
I’m autistic and find that well crafted typography helps me to read things more easily with less distraction. It’s not just dyslexics who might struggle with bad typography. I also know some ADHD people with similar issues to me. And 20% of the population is highly sensitive. I’m not saying it would matter for all of them, but for some, it surely does.
Whether this tool makes it “better” is another question. I tend to think there are general rules for “better” typography but when you get to the details, it depends on the individual and how they perceive and process information. One friend who is ADHD likes very cramped text which looks jumbled and messy to me, making it difficult to pick out individual letters. If the before case looks better for you, that’s a valid criticism.
My opinion: there are some objective truths about typography and readability. But some people push beyond the objective and try to enforce their personal preferences on the others as if they're fact.
As a Web Typography fan and practitioner of good typographic web standards the answer is no. You’re right.
This stuff is cruft. Displays are fundamentally different from paper, and it is OK that we don’t transfer every typographic standard 1-to-1.
I'm not into fonts, but reading anything on the web sucks after you get used to LaTeX.
- Justification is not there and it just looks bad.
- Paragraph width is arbitrary, which makes reading some emails (from folks who apparently think the earth is not only flat, but 1D) awful to read. I'm shown a 2000px+ wide, 60+ word line for a message.
- Long words or non-English destroy line breaks and lines break at odd places.
- There's widows and orphans around. I think I didn't even saw this one until I was told to fix my stuff during peer review, but now I see it everywhere and it only took a couple minutes to explain the issue and kind of ruin me.
- Non-english keeps breaking the web.
- Probably not just on typography, but many websites are still unable to deal with not so special characters like á, à, ä ø, £ and you get to read gibberish.
I suspect this isn't about making something look 10% better - it's about making something look 0.1% better in some circumstances.
Which is totally great! The world needs lots of 0.1% improvements because 100's of them can add up to make something look or feel better when applied at the right time in the right way.
The most noticeable change is the substitution of “ for ", which doesn't require this package--this package just does it for you instead of you actually changing the character in the HTML text. (The more interesting parts of the package are some alignment and spacing stuff that is less noticeable.)
If you work with monospace terminal/code/markup a lot, you are probably very used to seeing " . But it is definitely well established that “ is appropriate for human text, Word has automatically corrected this for many years.
Ask yourself: do people really care about rounded corners in furniture? Do people really care about flowers in their balconies? Do people really care about keeping their car polished and clean? …
People have been dealing with garbage word processor programs, publishing editors, and even doing documents in vector graphics editors. Imagine using an editor that just uses HTML + CSS under the hood, it's not that far from proprietary XML formats. If these features were standard, one could create such an editor and allow its output to be viewed everywhere.
Besides, I think this is cool. Someone saw a problem and solved it. I think it looks better too. Now, if only italics were properly spaced from normal text... but that's available in CSS.
I don’t know much about typography but was schooled to be a grammar perfectionist, and this seems great to me. It’d probably help out machine translators too.
They are ripe for any sort of typographic improvement --- the only things which keep me reading on my Kindle are the convenience and the ability to report errors.
Now, it's been a very long time since I see a mention of "Internet Explore 5". Kudos for highlighting the support for it but does it matter, who in the world are still using Internet Explorer 5?
IE5 was never a relevant contemporary of npm. The one that cast a long shadow on the web was IE6, pretty much exclusively, due to the unusual circumstances around antitrust intervention in the US and Europe putting MS off of really pushing their browser for nearly a decade (IE7 was pretty much DOA). IE5 was quickly replaced by IE6; nobody cared about it much even in 2005, let alone 2015. That was already an age of Chrome-first dev, complaining about Apple's lagging support for web ""standards"", and Firefox I guess more relevant than today but already increasingly an afterthought. The IE you'd be targeting, if any, was probably 8, unless you knew you wanted the userbase that was stuck with IE6.
A decade ago (2014) IE5 was completely dead. Some people were still force to care about IE6 but it was marginal. The default browser from that period was IE9 !
Readit News
Yet, the optical margin correction looks mechanistic and only concerned with symbols, not with characters: The "Y" at the start of the first line doesn't move a bit, even though it's clearly optically too light on the left. The next three lines all start optically pretty heavy with a bar. So I'd nudge to "Y" to the left.
I think it's just a pity that LaTeX with microtype is still the pinnacle of automatic typesetting, after all these years. I really enjoy good typography, but the Web, App and even Desktop world seems not to care about such details, apart from a few programs like Ableton.
My free, open-source, desktop text editor, KeenWrite, integrates my quote curling typographic library, KeenQuotes. KeenQuotes curls straight single quotes, double quotes, swaps in the multiplication symbol, corrects low opening double quotes (,,), and handles numeric primes, all while respecting code blocks. KeenWrite replaces some ligatures, but proper ligatures need to account for etymology, which has no simple solution. (Aside, even curling straight quotation marks properly requires part-of-speech processing.)
KeenWrite[1] exports to text, XHTML, or PDF files. Architecturally, the XHTML format doubles as an XML format that is passed to ConTeXt[2] for typesetting into PDF. ConTeXt developers care deeply about typography.
[1]: https://keenwrite.com/
[2]: https://contextgarden.net/
I have only a tyro's appreciation for typography, so please forgive my uninformed question. Is it a pity that LaTeX+microtype is the pinnacle of automatic typesetting because it's not good enough, or because it's non-web-focused and there is no web analogue of equivalent quality?
Also, the full feature set of microtype is only supported with (Pdf)LaTeX, but not with the newer XeLaTex, meaning that in order to get your favourite fonts to work with PdfLaTex, you have to do a hilarious amount of work to translate an OTF font into specific cuts in MetaFont, the LaTeX font format, and so on.
I mean, I understand that things get pretty tricky once you try to integrate such schemes into a font renderer. There's other scripts than just Latin, with probably very different rules, there are different font sizes, text sizes, etc. A lot of variables to take into account. A lot of variables that were constants when typesetting on a page. So the problem is now more complicated than in the past.
It's better today (both for the above issue and also for usability) to disable the ligature substitution and let browser engines manage ligature replacement.
Browser search can typically parse Unicode ligatures, so it's not a huge usability problem. But saving, copying, or scraping the output and using tools that don't process ligatures into their component letters will fail.
This also (very slightly, but still notably) abuses empty contentless <span>s to inject space through CSS margins.
Also, the attempt to brute-force small caps by applying a font subset via a span doesn't work at all for me, in either Chrome or Firefox.
It's a good effort, but I also can't think of a use case where the result is worth what this does to the markup.
Maybe this might help people with dyslexia but don't proper dyslexia focused fonts and aids exist already?
Now, I am completely aware there is nothing behind this other than my visceral reaction. I do not know you at all. I share it only to communicate that to somebody with my background it is an obvious and fundamental improvement.
Most people who have made a website with CSS before would at best change the font size, the line spacing and the font face and tweak it to a point that feels easily readable and call it a day. Introducing variable widths between the characters of the font, digraphs and so on feels like more like exercising artisanship that only the experts would see value in rather than solving a technical problem.
Perhaps advanced web design/typesetting is the main application of this and it has a chance of inducing a better subconscious effect on the viewer. Sort of how magazines and books were designed back in the day I suppose.
No one wakes up in the morning, looks in the mirror, and says, "I want to use an application build with React, has no tech debt, and has great commit msgs...".
I'm not suggesting the tech and stack don't matter. They do. But they are a means, not the ends. The sad fact is, the ends aren't - from the users' POV - noticeably better. More bloated? More buggy? Probably.
Whether this tool makes it “better” is another question. I tend to think there are general rules for “better” typography but when you get to the details, it depends on the individual and how they perceive and process information. One friend who is ADHD likes very cramped text which looks jumbled and messy to me, making it difficult to pick out individual letters. If the before case looks better for you, that’s a valid criticism.
Which is totally great! The world needs lots of 0.1% improvements because 100's of them can add up to make something look or feel better when applied at the right time in the right way.
If you work with monospace terminal/code/markup a lot, you are probably very used to seeing " . But it is definitely well established that “ is appropriate for human text, Word has automatically corrected this for many years.
Besides, I think this is cool. Someone saw a problem and solved it. I think it looks better too. Now, if only italics were properly spaced from normal text... but that's available in CSS.
- https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Edit: I missed that on the top of the page there's an example section on a second column which is not responsive.
They are ripe for any sort of typographic improvement --- the only things which keep me reading on my Kindle are the convenience and the ability to report errors.
But I wouldn't mind having such a feature built-in in browsers if it brings value to other people.