pcl-labs / browtricks-ui-components

https://browtricks-ui-components.vercel.app
0 stars 0 forks source link

Standardize font sizing, start with base font size of 16px #11

Open paulchrisluke opened 1 year ago

paulchrisluke commented 1 year ago

Our current tailwind.config.js uses non-standard font sizing which is leading to some weird styles on our site.

Currently it looks like this:

   fontSize: {
        mi: '.65rem',
        md: '.9375rem',
        '2.5xl': '1.75rem',
        '3.5xl': '2rem',
        '4.5xl': '2.5rem',
        '5.5xl': '3.5rem',
        '6.5xl': ['4rem', '1.10'],
        '7.5xl': '5rem',
      },

It should look more like this using xs, sm, md, lg, xl and only 2xl type stuff in extreme cases:

fontSize: {
  xs: '.65rem',
  sm: '.9375rem',
  md: '1.75rem',
  lg: '2rem',
  xl: '2.5rem',
  '2xl': '3.5rem',
  '3xl': '4rem',
  '4xl': '5rem',
},

Our design in figma does split the fonts into styles:

Screenshot 2022-12-29 at 10 56 33 AM

In our case, the naming of our fonts is a bit different in figma than in standard tailwind, but this is how it should look:

fontSize: {
      xs: '.625rem',
      sm: '.75rem',
      md: '.8125rem',
      lg: '.875rem',
      xl: '.9375rem',
      base: '1rem',
      '2xl': '1.125rem',
      '3xl': '1.25rem',
      '4xl': '1.625rem',
      '5xl': '2rem',
    },
kshekh commented 1 year ago

@paulchrisluke Yes, I will check and update the tailwind.config.js file as per your suggestions