4 ms·

What exactly about sizing text causes issues? Do you mean fluid/responsive sizing? AFAIK, the best modern way to do it is `font-size: clamp(0.75rem, 1rem + 2vw

What exactly about sizing text causes issues? Do you mean fluid/responsive sizing? AFAIK, the best modern way to do it is `font-size: clamp(0.75rem, 1rem + 2vw, 3rem)` (the use of rem as well as vw is to not break zooming for accessibility)

greggturkington 5y ago
Never use viewport-relative units (like vw) for text sizing, it is not a best practice for accessibility (part of the reason it's not in the examples here). Modern browsers handle zoom just fine, regardless of units. We use rem in case a user has set their own preferred base text size (the same reason we don't use viewport-relative units).
- lucas_codes 5y ago
  That's why it's rem + vw, to prevent accessibility problems
  - greggturkington 5y ago
    The vw introduces the accessibility bug. Your can add whatever other units to it you like, the issues remain.
    - lucas_codes 5y ago
      What accessibility bug is that? Adding the other unit is specifically so the issues do not remain.
chrisfinazzo 5y ago
Pretty much. The thing that really made Grid sink in for me was seeing the pseudocode at Grid By Example [1], showing how each of the different constructs work. [1]: https://gridbyexample.com https://gridbyexample.com Jason Santa Maria's On Web Typography [2] originally included a "worked" example that you could put into a page and pull apart to start building similar things in your own projects. However, before it shipped, this section was dropped. [2]: https://abookapart.com/products/on-web-typography https://abookapart.com/products/on-web-typography With calc and clamp now in the mix, it seems as if we no longer agree that 1rem=16px even if px is probably the most precise screen unit we have. "Uh, pixels aren't responsive, so let's not even mention them." It's not the end goal, but it feels like we're throwing away the map which could explain how to reach said goal.

greggturkington 5y ago

Never use viewport-relative units (like vw) for text sizing, it is not a best practice for accessibility (part of the reason it's not in the examples here). Modern browsers handle zoom just fine, regardless of units. We use rem in case a user has set their own preferred base text size (the same reason we don't use viewport-relative units).

lucas_codes 5y ago
That's why it's rem + vw, to prevent accessibility problems
- greggturkington 5y ago
  The vw introduces the accessibility bug. Your can add whatever other units to it you like, the issues remain.
  - lucas_codes 5y ago
    What accessibility bug is that? Adding the other unit is specifically so the issues do not remain.

chrisfinazzo 5y ago

Pretty much. The thing that really made Grid sink in for me was seeing the pseudocode at Grid By Example [1], showing how each of the different constructs work. [1]: https://gridbyexample.com https://gridbyexample.com Jason Santa Maria's On Web Typography [2] originally included a "worked" example that you could put into a page and pull apart to start building similar things in your own projects. However, before it shipped, this section was dropped. [2]: https://abookapart.com/products/on-web-typography https://abookapart.com/products/on-web-typography With calc and clamp now in the mix, it seems as if we no longer agree that 1rem=16px even if px is probably the most precise screen unit we have. "Uh, pixels aren't responsive, so let's not even mention them." It's not the end goal, but it feels like we're throwing away the map which could explain how to reach said goal.