They seem quite close ... with Roboto being slightly taller and wider (or more spaced out characters)
In general it's better to pick ONE font (and perhaps a display font too) and understand how their text-box effects the vertical spacing in your design. For the purposes of this repo picking conflicting fonts is a bad idea. For simple text-based layouts it's not such a big deal, but the more you lean on a grid, the more problems will occur.
It might be an idea to either:
- Include both fonts as
@font-face (for testing at least)
- Or pick a decent print-based font and have
system-ui as a fallback only
The only concerns really seem to be a slightly different baseline (higher?) which changes the .gl-baseline-grid slightly. In terms of box-height they're pretty much the same though. I don't think the --spacing or --font-size variables need to change.
In general it's better to pick ONE font (and perhaps a display font too) and understand how their
text-boxeffects the vertical spacing in your design. For the purposes of this repo picking conflicting fonts is a bad idea. For simple text-based layouts it's not such a big deal, but the more you lean on a grid, the more problems will occur.It might be an idea to either:
@font-face(for testing at least)system-uias a fallback onlyThe only concerns really seem to be a slightly different baseline (higher?) which changes the
.gl-baseline-gridslightly. In terms of box-height they're pretty much the same though. I don't think the--spacingor--font-sizevariables need to change.