Reducing header font sized

[nareshbhatia]

I notice that header sizes are calculated here. What is the most efficient way to reduce all header sizes, e.g. something like this:

const h1 = vr.scale(3 / 5)
const h2 = vr.scale(2 / 5)
const h3 = vr.scale(1 / 5)
const h4 = vr.scale(0 / 5)
const h5 = vr.scale(-1 / 5)
const h6 = vr.scale(-1.5 / 5)

[nareshbhatia]

I have hardcoded the desired font sizes in my theme for right now. Please let me know if there is a better way.

overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
    h1: {
        fontSize: '34px'
    },
    h2: {
        fontSize: '26px'
    },
    h3: {
        fontSize: '22px'
    },
    h4: {
        fontSize: '20px'
    },
    h5: {
        fontSize: '16px'
    },
    h6: {
        fontSize: '14px'
    },
})

Thanks in advance.

[nnals]

hello,

if you just want statically reduce all heading font sizes you could just set a lower scaleRatio (default is 2) as described here:

scaleRatio: The "scale ratio" for the theme. This value is the ratio between the h1 font size and the baseFontSize. So if the scale ratio is 2 and the baseFontSize is 16px then the h1 font size is 32px.

so e.g.

new Typography({
  // ...
  scaleRatio: 1.5
})

i just needed to adjust the heading font sizes dynamically with a breakpoint and you're question helped me figure out how to achieve it. so just in case this helps anyone coming here (it's probably very much related to this issue and my solution might have already been proposed there, i don't know):

i have just solved it using the scale prop and the same denominators as in src/utils/createStyles.js:

const scalingDenominators = [
  ['h1', 5],
  ['h2', 3],
  ['h3', 2],
  ['h4', 0],
  ['h5', -1],
  ['h6', -1.5],
]
const scalingFactor = 10 // original is 5

const typography = new Typography({
  // ...
  overrideStyles: (vr, options) => {
    return {
      '@media(max-width:500px)': {
        ...scalingDenominators.reduce(
          (acc, [tag, denominator]) => ({
            ...acc,
            [tag]: vr.scale(denominator / scalingFactor),
          }),
          {}
        ),
      },
    }
  },
})

cheers

PS: in case anyone knows whether it's possible to override the scaleRatio in overrideStyles, i would be very interested.