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.
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.
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 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.
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.
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.
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.
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.
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.
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 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.
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.
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.
Love Typeset! Bringing traditional print typography to the web without JavaScript? Genius. Less than 1KB CSS and IE5 compatibility? Impressive. Anyone used this with modern frameworks like React or Vue? How does it handle font variations and system fonts? Also, huge props for dedicating it to the public domain - open-source spirit at its finest!
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?
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 !
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 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.
There's a bug on mobile (Android). For some reason the page is twice a wide as it needs to be.
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.
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.
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 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.
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.
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.
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.
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.
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.
> 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 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.
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.
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! ;)
Love Typeset! Bringing traditional print typography to the web without JavaScript? Genius. Less than 1KB CSS and IE5 compatibility? Impressive. Anyone used this with modern frameworks like React or Vue? How does it handle font variations and system fonts? Also, huge props for dedicating it to the public domain - open-source spirit at its finest!
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.
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.
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.
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 !
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.
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.
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.