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

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

Comments

  • Johannes NeumeierJohannes Neumeier Posts: 356
    edited October 2022
    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.


  • Nick ShinnNick Shinn Posts: 2,131
    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)



  • Jasper de WaardJasper de Waard Posts: 617
    edited October 2022
    @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.
  • This demonstration is the best I have seen on the effect of optical sizing:

    https://twitter.com/djrrb/status/1567864052180819969
  • @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.
  • True, some explanation and contagious enthusiasm helps ;-)
  • @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 ShinnNick Shinn Posts: 2,131
    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.
  • @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 ShinnNick Shinn Posts: 2,131
    I mean “fonts in use”, not a trade demo or faux usage.
    In the wild, not the lab.
    Paid for, not a promo.
  • 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.
Sign In or Register to comment.