Typography

SaasAble supports different typograhy for each theme, which defined in the theme's typography. You can find these in the typography.ts file located in specific view folders. For instance, the AI theme typography are defined in src/views/landings/ai/theme/.

src/views/landings/ai/theme/typography.ts

...

/***************************  SAAS ABLE / AI THEME - TYPOGRAPHY  ***************************/

export default function typography(theme: Theme) {
  return {
    fontFamily: FONT_ARCHIVO,

    // heading - large
    h1: {
      fontWeight: 400,
      fontSize: 57,

      // lineHeight = lineHeight in figma / fontSize. i.e 1.123 = 64/57
      lineHeight: 1.123,
      letterSpacing: -0.25,
      [theme.breakpoints.down('md')]: {
        fontSize: 45,
        lineHeight: 1.156
      },
      [theme.breakpoints.down('sm')]: {
        fontSize: 32,
        lineHeight: 1.222
      }
    },

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

    // display - medium
    h3: {
      ...
    },

    // display - small
    h4: {
     ...
    },

    // label - large
    h5: {
      ...
    },

    // paragraph - large
    h6: {
      ...
    },

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

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

    // label - medium
    subtitle1: {
      ...
    },

    // label - small
    subtitle2: {
      ...
    },

    // hyperlink - small
    caption: {
      ...
    },

    // hyperlink - large
    caption1: {
      ...
    },

    // hyperlink - medium
    caption2: {
      ...
    },

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

```

Update all values according to your requirements. for more information check typography page

The more detailed info on each prop you can find from below table.

Typography Variant	Property	Value	Description
	fontFamily	FONT_ARCHIVO	It's value add from config file
h1 - heading - large	fontSize	57	For main heading size change
	fontWeight	400	For heading weight change (sets how thick or thin characters in text should be displayed)
	lineHeight	1.123	For text height change (It sets the differences between two lines of your content)
	letterSpacing	-0.25	For character spacing change (control the spacing between text characters)
h2 - heading - medium	fontSize	45	Same as above description
	fontWeight	400
	lineHeight	1.156
	letterSpacing	0
h3 - disaply - medium	fontSize	28	Same as above description
	fontWeight	400
	lineHeight	1.286
	letterSpacing	0
h4 - disaply - small	fontSize	24	Same as above description
	fontWeight	400
	lineHeight	1.333
	letterSpacing	0
h5 - label - large	fontSize	22	Same as above description
	fontWeight	500
	lineHeight	1.273
	letterSpacing	0
h6 - paragraph - large	fontSize	22	Same as above description
	fontWeight	400
	lineHeight	1.364
	letterSpacing	0
body1 - paragraph - medium	fontSize	16	Same as above description
	fontWeight	400
	lineHeight	1.5
	letterSpacing	0.5
body2 - paragraph - small	fontSize	14	Same as above description
	fontWeight	400
	lineHeight	1.429
	letterSpacing	0.25
subtitle1 - label - medium	fontSize	16	Same as above description
	fontWeight	500
	lineHeight	1.5
	letterSpacing	0.15
subtitle2 - label - small	fontSize	14	Same as above description
	fontWeight	600
	lineHeight	1.429
	letterSpacing	0.1
caption - hyperlink - small	fontSize	12	Same as above description
	fontWeight	600
	lineHeight	1.333
	letterSpacing	0
caption1 - hyperlink - large	fontSize	16	Same as above description
	fontWeight	400
	lineHeight	1.5
	letterSpacing	0.5
caption2 - hyperlink - medium	fontSize	14	Same as above description
	fontWeight	500
	lineHeight	1.429
	letterSpacing	0.1