Typography

Applying single configuration across all relevant components. You can find these in the typography.ts file located in specific src folders. For instance, single typography is defined in src/themes/.

src/themes/typography.ts

/***************************  DEFAULT - TYPOGRAPHY  ***************************/

export default function typography() {
  return {
    fontFamily: FONT_ARCHIVO,
    letterSpacing: 0,

    // heading - h1
    h1: {
      fontWeight: 500,
      fontSize: 40,
      lineHeight: '44px'
    },

    // heading - h2
    h2: {
      ...
    },

    // heading - h3
    h3: {
      ...
    },

    // heading - h4
    h4: {
      ...
    },

    // heading - h5
    h5: {
      ...
    },

    // heading - h6
    h6: {
      ...
    },

    // subtitle - 1
    subtitle1: {
      ...
    },

    // subtitle - 2
    subtitle2: {
      ...
    },

    // paragraph - 1
    body1: {
      ...
    },

    // paragraph - 2
    body2: {
      ...
    },

    // caption - regular
    caption: {
      ...
    },

    // caption - medium
    caption1: {
      ...
    },

    // button
    button: {
      textTransform: 'capitalize'
    }
  };
}

Update all values according to your requirements. For more information, check the typography page

The more detailed info on each prop can be found in the table below.

Typography Variant	Property	Value	Description
	fontFamily	FONT_ARCHIVO	It's value add from config file
	letterSpacing	0	For character spacing change (control the spacing between text characters)
h1 - heading	fontSize	40	For main heading size change
	fontWeight	500	For heading weight change (sets how thick or thin characters in text should be displayed)
	lineHeight	'44px'	For text height change (It sets the differences between two lines of your content)
h2 - heading	fontSize	32	Same as above description
	fontWeight	500
	lineHeight	'36px'
h3 - heading	fontSize	28	Same as above description
	fontWeight	500
	lineHeight	'32px'
h4 - heading	fontSize	24	Same as above description
	fontWeight	500
	lineHeight	'28px'
h5 - heading	fontSize	20	Same as above description
	fontWeight	500
	lineHeight	'24px'
h6 - heading	fontSize	18	Same as above description
	fontWeight	500
	lineHeight	'22px'
subtitle1 - subtitle - 1	fontSize	16	Same as above description
	fontWeight	500
	lineHeight	'20px'
subtitle2 - subtitle - 2	fontSize	14	Same as above description
	fontWeight	500
	lineHeight	'18px'
body1 - paragraph - 1	fontSize	16	Same as above description
	fontWeight	400
	lineHeight	'20px'
body2 - paragraph - 2	fontSize	14	Same as above description
	fontWeight	400
	lineHeight	'18px'
caption - caption - regular	fontSize	12	Same as above description
	fontWeight	400
	lineHeight	'16px'
	letterSpacing	0
caption1 - caption - medium	fontSize	12	Same as above description
	fontWeight	500
	lineHeight	'16px'
	letterSpacing	0