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.
I'm a typography nerd, and the author of another DAW. I think that Live looks pretty good, but it doesn't have much to do with typography in my eyes.
Now, their education website(s) ... that stuff is gorgeous, and I think does represent somebody's typographic imagination, to the extent that HTML/CSS makes it possible (which is .. a lot).
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.
>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
I'm curious but have you ever heard of anyone that works as a programmer that has not been especially keen on linting and testing (as in automated testing)?
I thought that examples of not being overly keen were quite abundant.
And it is often lamented on this site about how much work it is to get even people who have made a small to medium sized project and have the word programmer or developer in their job title to actually want to do linting and testing.
So what I'm saying is that at least for linting and testing yes, these really might seem like
>exercising artisanship that only the experts would see value in rather than solving a technical problem.
Yeah, I’ve been coding for 30 years, and to me, linting seems like alphabetizing the tools on your peg board. There are plenty of times where I want to break an expression into multiple lines—or not—in the service of readability. And there are no clear rules I could dictate to codify how I make that call.
I get that it helps people who are collaborating on large codebases. But to me, typography is orders of magnitude more important, because it’s facing the end-user.
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.
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? …
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.
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 !
Have to agree. With as much reading that's done on small screens these days, I find it discouraging that a project about good web typography looks broken on my phone.
I see adapting parameters like size, measure, and line height to different screen sizes (and the related reading distances) as one of the main challenges of web typography.
Web "typography" is so awful I had to disallow web fonts a long time ago. Now its time to write some greasemonkey lube to fix line heights and font weights, as thin fonts are nonreadable and finally somehow fix gray text low-contrast nonsense.
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.
[1]: https://keenwrite.com/
[2]: https://contextgarden.net/
Thank you for the pointer! ConTeXt looks pretty promising.
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.
What does "Ableton" (which is a company that makes a piece of software called "Live" among other things) do with typography on the desktop?
They genuinely care about their software's UI.
I'm a typography nerd, and the author of another DAW. I think that Live looks pretty good, but it doesn't have much to do with typography in my eyes.
Now, their education website(s) ... that stuff is gorgeous, and I think does represent somebody's typographic imagination, to the extent that HTML/CSS makes it possible (which is .. a lot).
Also the " in the second paragraph feels a bit too far out to me, microtype does these things more subtly a bit.
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 tell my web development students that typography is Lovecraftian cursed knowledge. You can't delve too deep, or it will drive you mad.
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.
>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
I'm curious but have you ever heard of anyone that works as a programmer that has not been especially keen on linting and testing (as in automated testing)?
I thought that examples of not being overly keen were quite abundant.
And it is often lamented on this site about how much work it is to get even people who have made a small to medium sized project and have the word programmer or developer in their job title to actually want to do linting and testing.
So what I'm saying is that at least for linting and testing yes, these really might seem like
>exercising artisanship that only the experts would see value in rather than solving a technical problem.
Yeah, I’ve been coding for 30 years, and to me, linting seems like alphabetizing the tools on your peg board. There are plenty of times where I want to break an expression into multiple lines—or not—in the service of readability. And there are no clear rules I could dictate to codify how I make that call.
I get that it helps people who are collaborating on large codebases. But to me, typography is orders of magnitude more important, because it’s facing the end-user.
> feels like more like exercising artisanship that only the experts would see value in
Same as linting and refactoring, then.
You missed the point entirely. This is basic stuff that all designers work with.
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.
You can print things off the web.
Think of the trees! ;)
I'm not into fonts, but reading anything on the web sucks after you get used to LaTeX.
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.
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? …
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.
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.
I'm with you. This makes zero difference to me.
I see this dates back a decade, which makes sense given this is now achievable in modern CSS without a preprocessor.
Not quite. Hyphenation is rather unreliable in my experience.
Yeah, last time I experimented with it `hyphens: auto;` and `word-break: auto-phrase;` were simply not ready to try even in beta/nightly browsers.
- https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
In my case, it really struggled with over-hyphenation when a line break would be completely fine.
Support for ``hanging-punctuation`` is not there yet.
Achievable, I suppose. But 10yo CSS is a big-enough PITA that, if the machine can learn to do it, it should.
There's a bug on mobile (Android). For some reason the page is twice a wide as it needs to be.
Edit: I missed that on the top of the page there's an example section on a second column which is not responsive.
Any prospect of getting this into an ePub reader?
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.
I don't think so as epub renderers target the spec which is pretty entrenched at this point.
I feel bad that, after looking at the Before/After comparison, it wasn't clear to me which one looked better to my eyes.
But I wouldn't mind having such a feature built-in in browsers if it brings value to other people.
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?
The website is nearly a decade old. presumably folks did still care about IE5 in that time period.
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 !
Ah, sorry, I didn't notice the website itself was that old.
Ironic that the website is unreadable on mobile due to improper flow
The correct term would be non-responsive. I think if the second column be moved to the bottom, it would be hard to read on mobile.
My iOS/Safari on a 13 mini detects bad CSS immediately.
You can easily tell some sites are unresponsive or Chrome-only.
Have to agree. With as much reading that's done on small screens these days, I find it discouraging that a project about good web typography looks broken on my phone.
I see adapting parameters like size, measure, and line height to different screen sizes (and the related reading distances) as one of the main challenges of web typography.
Not as sophisticated of a project but I've tinkered with a stylesheet to address some of these issues here: https://pglevy.github.io/typeset.css/
The most annoying thing about the page is that the before and after are not presented side by side making it difficult to see all the changes at once.
Web "typography" is so awful I had to disallow web fonts a long time ago. Now its time to write some greasemonkey lube to fix line heights and font weights, as thin fonts are nonreadable and finally somehow fix gray text low-contrast nonsense.
I really like the Stylus plugin for that. I think it takes a bit less effort than changing CSS with greasemonkey.
[flagged]