Plumber - Easy baseline grids with SASS(

almost 4 years ago from Viktor H., Frontend+UX

  • Viktor H., almost 4 years ago (edited almost 4 years 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, almost 4 years ago (edited almost 4 years 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
      • Viktor H., almost 4 years ago (edited almost 4 years 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, almost 4 years 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, contact me if you're ever interested :)

          1 point