search

benface / tailwindcss-typography

Tailwind CSS plugin to generate typography utilities and text style components
ISC License
244 stars 5 forks source link

Golden ratio typography #20

Open jonathan-s opened 4 years ago

jonathan-s commented 4 years ago

I'd consider implementing golden ratio typography as detailed here: https://grtcalculator.com/

benface commented 4 years ago

Interesting idea @jonathan-s. Do you have any idea for what the API could be like?

jonathan-s commented 4 years ago

For font-size specifically it would be nice to be able to use a function.

theme: {
  fontSize: calculateGoldenRatio(1.6)
  ...
}

The output would be. 

      xs: '0.97rem',
      sm: '1.25rem',
      base: '1.6rem',
      lg: '2rem',
      xl: '2.6rem',
      '2xl': '3.3rem',
      '3xl': '4.2rem',
      '4xl': '5.3rem',
      '5xl': '6.7rem',
      '6xl': '8.4rem',

If no function is provided the base is assumed to be 1 rem. Though my preference for the standard case would be 1.6rem. That coupled with html { font-size: 62.5% } would mean that 1rem is always equal to 10px which helps if you size things in other places in rem.

I haven't yet given much though for the margin stuff that is also included in the calculator.