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

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

Comments

  • Johannes Neumeier
    Johannes Neumeier Posts: 365
    edited October 2022
    Options
    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 Shinn
    Nick Shinn Posts: 2,169
    Options
    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
    Options
    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
    Jasper de Waard Posts: 618
    edited October 2022
    Options
    @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
    Options
    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
    Options
    This demonstration is the best I have seen on the effect of optical sizing:

    https://twitter.com/djrrb/status/1567864052180819969
  • Roel Nieskens
    Options
    @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
    Options
    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
    Options
    True, some explanation and contagious enthusiasm helps ;-)
  • Peter Constable
    Options
    @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
    Nick Shinn Posts: 2,169
    Options
    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
    Options
    @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
    Nick Shinn Posts: 2,169
    Options
    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
    Options
    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.