Problem: MasterCSS directly exposes size values in it's API: font-size, margin, padding, etc. All values are arbitrary. This gives infinite options! Sometimes infinite options are good, but for easier developer decision-making, clearer communication with designers, and a better user experience, it helps to use fewer size values. MasterCSS offers these scales for color but not for size.
Solution: Offer a step-based scale for typography, spacing, and grid as an add-on or built-in. Clearleft's Utopia.fyi would be a small yet comprehensive model. See this Utopia.fyi tool for Tailwind to compare.
Description
Problem: MasterCSS directly exposes size values in it's API: font-size, margin, padding, etc. All values are arbitrary. This gives infinite options! Sometimes infinite options are good, but for easier developer decision-making, clearer communication with designers, and a better user experience, it helps to use fewer size values. MasterCSS offers these scales for color but not for size.
Solution: Offer a step-based scale for typography, spacing, and grid as an add-on or built-in. Clearleft's Utopia.fyi would be a small yet comprehensive model. See this Utopia.fyi tool for Tailwind to compare.
Intro to Utopia: https://www.youtube.com/watch?v=DDuGtN-GakA