6 comments

  • Daniel HaimDaniel Haim, 11 months ago

    This is amazing

    0 points
  • Weston Thayer, 12 months ago

    Awesome work. Big caveats:

    • Doesn't work with fallback fonts -- you can only specify a single ratio
    • Manually setting the ratio is imprecise and will lead to rounding errors at larger font sizes
    0 points
    • , 12 months ago (edited 12 months ago )

      Thanks for the feedback!

      • Unfortunately there is no way to know beforehand in the CSS if the specified font will be successfully loaded. I recommend loading web fonts using the Web Font Loader that sets classes on the body so you can target multiple fonts.

      • Did you use the measure tool? I tested with grid sizes up to 100px and font sizes up to 500px and it looked good.

      0 points
      • Weston Thayer, 12 months ago (edited 12 months ago )

        Thanks for the reply. I don't think Web Font Loader will tell you what font was loaded, just whether your webfont was loaded or not. So if you miss the webfont, you can only guess at what font is being used. Also, designers going the system font route are out of luck. It doesn't look like you can detect the rendered font with JS either.

        The measure tool will only be off by a pixel or two, probably at extreme sizes. I agree it's good enough. Using the font metrics will get you the best data though.

        Again, great stuff. Have you seen those weird rounding errors for how type is positioned on Chrome for Windows? I found they always round down instead of to the nearest whole number.

        0 points
        • , 12 months ago (edited 12 months ago )

          Yes, WFL can only tell you about the fonts it tries to load, and knows nothing about local fonts. However this will hopefully change sooner or later – there is a note in the CSS Font Loading Module Draft saying that a future version should handle local fonts too.

          I agree about font metrics. I'd like to make a better measure tool that reads a font file and parses the OpenType tables for the exact metrics.

          Thanks for the heads up! I haven't had time to test on Windows yet, but Chrome acts weird (and different) on Mac and Android too. Rounding values to ¼ pixels should have mitigated this; I will see what more can be done. At the moment Firefox is the only browser I know with precise subpixel rendering.

          0 points
          • Weston Thayer, 12 months ago

            Ahh yes, that would be an excellent API.

            I've been slowly working on a blog post that goes more into depth on how we can use font metrics for better design, and why libs like Plumber are valuable. Would love to have you review sometime. My email is me@westonthayer.com, contact me if you're ever interested :)

            1 point