Web sites/e-readers that match optical size to pixel size automatically

Nick Shinn

This is one of the things that the variable format is touted as being capable of.
Where is it happening?

Johannes Neumeier

Maybe not the examplary answer you were looking for, but as per [spec](https://w3c.github.io/csswg-drafts/css-fonts/#font-optical-sizing-def) browsers [automatically apply optical sizing to text](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing) set in fonts that have an opsz axis. I am not sure how the default behavior implementation is right now, but at least Safari on Mac did this (to my surprise) already for a while. You can, and sometimes want to, overwrite this behavior of course.

So potentially: Anywhere on the web where a font with opsz is used.

John Hudson

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.

Nick Shinn

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.  

Roel Nieskens

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)

Jasper de Waard

@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.

Thomas Phinney

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.

Florian Pircher

This demonstration is the best I have seen on the effect of optical sizing:

https://twitter.com/djrrb/status/1567864052180819969

Roel Nieskens

@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.

Jasper de Waard

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

True, some explanation and contagious enthusiasm helps ;-)

Peter Constable

Jasper de Waard said:

@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.

Nick Shinn

These are trade demonstrations.

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.

Roel Nieskens

@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?

Nick Shinn

I mean “fonts in use”, not a trade demo or faux usage.
In the wild, not the lab.
Paid for, not a promo.

Thomas Phinney

Nick Shinn said:

These are trade demonstrations.

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.