With the caveat that there is an issue with browsers selecting opsz instance based on px size and not pt size as specified in the opsz axis specification. There are complicated reasons for this, but basically it is because Apple implemented the automatic size selection in Safari and it happens that Apple platforms have an internal 1:1 correlation between px and pt size, so they used px in the browser for opsz selection. Other browsers then followed Apple’s lead, but on platforms where there is not a 1:1 correlation between px and pt. This means that the wrong opsz instance is used in a lot of browsers on a lot of platforms.
I rewrote the opsz axis specification to clarify why the 1/72 inch physical pt is the axis scale unit, and what software needs to do if it wants to accurately calculate the correct opsz value, but the browsers are still using px even though this has been logged as a bug against them by Apple’s own browser text developer.
So potentially: Anywhere on the web where a font with opsz is used.
I just want to try it out, as a “user” would, not as a bleeding edge techie, which I am not.
The reason being that I am explaining to a prospective client that, in order to be prepared for the future, it would be a good idea to commission a custom design in the variable format. So to which non-trade site to I point them, to illustrate this suggestion?
Perhaps the best plan, at the moment, is to make a new design “variable ready”, while supplying it in the static format.
For the Fraunces typeface we created a minisite where the difference is shown in a sort of "with and without" component, see screenshot. I used this to explain the impact of optical sizing to non-fontheads, which was quite effective. (The demo is repeated in a beginner-friendly article on my own site too, if you allow me the plug)
@Roel Nieskens: While I really love the microsite, I think it is actually surprisingly hard to see the differences between the optical sizes. A simple overlaid image would do much good in that respect, I think.
The thing is also that a non-type designer will probably not know exactly what to look for. Judging from the image, the differences for smaller sizes are: - wider spacing - larger x-height - reduced 'clunkiness'
But it could be that I am missing some obvious ones, e.g. contrast? Although it doesn't look like it.
It seems like the thing that makes Fraunces opsz unusual is that the default opsz may be at the display end rather than a text size? I certainly see the difference at intermediate and small sizes.
@Jasper de Waard Did you jiggle the slider thingy?I can't comment on the typographic correctness of Fraunces' optical sizes, but I enjoy seeing the penny drop in "regular webdevelopers" about what kind of difference it makes.
Yes, I did. If it helps to drop the penny for web developers then I stand corrected, but my first impression was that the small text on the left was just a little bigger. As if the point size was just increased, which would likely not impress a web developer.
@Roel Nieskens: While I really love the microsite, I think it is actually surprisingly hard to see the differences between the optical sizes. A simple overlaid image would do much good in that respect, I think.
A problem with that opsz demo is that there are three lines of display text that can fill the viewport, and that can give the impression that that's the entire demo, but the differences with/withough auto opsz are pretty subtle. The impact is more obvious if you scroll down and look at the smallest-sized text.
I would like to see a “user” website, where I can zoom in on text (by “unpinching” on a mobile device), and observe how the optical size changes from Regular to Display as each letter shape occupies more and more pixels.
@Nick Shinn Do you mean observing those changes while zooming? Or something like this? Do you think that demo would be more effective with longer text instead of a character?
I would like to see a “user” website, where I can zoom in on text (by “unpinching” on a mobile device), and observe how the optical size changes from Regular to Display as each letter shape occupies more and more pixels.
I seem to remember somebody telling me that kind of zooming does not change optical size, at least in some browsers.
Comments
I rewrote the opsz axis specification to clarify why the 1/72 inch physical pt is the axis scale unit, and what software needs to do if it wants to accurately calculate the correct opsz value, but the browsers are still using px even though this has been logged as a bug against them by Apple’s own browser text developer.
I just want to try it out, as a “user” would, not as a bleeding edge techie, which I am not.
The reason being that I am explaining to a prospective client that, in order to be prepared for the future, it would be a good idea to commission a custom design in the variable format. So to which non-trade site to I point them, to illustrate this suggestion?
Perhaps the best plan, at the moment, is to make a new design “variable ready”, while supplying it in the static format.
The thing is also that a non-type designer will probably not know exactly what to look for. Judging from the image, the differences for smaller sizes are:
- wider spacing
- larger x-height
- reduced 'clunkiness'
But it could be that I am missing some obvious ones, e.g. contrast? Although it doesn't look like it.
https://twitter.com/djrrb/status/1567864052180819969
I would like to see a “user” website, where I can zoom in on text (by “unpinching” on a mobile device), and observe how the optical size changes from Regular to Display as each letter shape occupies more and more pixels.
In the wild, not the lab.
Paid for, not a promo.