{
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  fontSize: 14, // Base font size in pixels
  fontWeightLight: 300,
  fontWeightRegular: 400,
  fontWeightMedium: 500,
  fontWeightBold: 700,
  htmlFontSize: 16, // Browser default
}

h1: {
  fontSize: '6rem',      // 96px
  fontWeight: 300,
  lineHeight: 1.167,
  letterSpacing: '-0.01562em',
}

h2: {
  fontSize: '3.75rem',   // 60px
  fontWeight: 300,
  lineHeight: 1.2,
  letterSpacing: '-0.00833em',
}

h3: {
  fontSize: '3rem',      // 48px
  fontWeight: 400,
  lineHeight: 1.167,
  letterSpacing: '0em',
}

h4: {
  fontSize: '2.125rem',  // 34px
  fontWeight: 400,
  lineHeight: 1.235,
  letterSpacing: '0.00735em',
}

h5: {
  fontSize: '1.5rem',    // 24px
  fontWeight: 400,
  lineHeight: 1.334,
  letterSpacing: '0em',
}

h6: {
  fontSize: '1.25rem',   // 20px
  fontWeight: 500,
  lineHeight: 1.6,
  letterSpacing: '0.0075em',
}

subtitle1: {
  fontSize: '1rem',      // 16px
  fontWeight: 400,
  lineHeight: 1.75,
  letterSpacing: '0.00938em',
}

subtitle2: {
  fontSize: '0.875rem',  // 14px
  fontWeight: 500,
  lineHeight: 1.57,
  letterSpacing: '0.00714em',
}

body1: {
  fontSize: '1rem',      // 16px
  fontWeight: 400,
  lineHeight: 1.5,
  letterSpacing: '0.00938em',
}

body2: {
  fontSize: '0.875rem',  // 14px
  fontWeight: 400,
  lineHeight: 1.43,
  letterSpacing: '0.01071em',
}

button: {
  fontSize: '0.875rem',  // 14px
  fontWeight: 500,
  lineHeight: 1.75,
  letterSpacing: '0.02857em',
  textTransform: 'uppercase',
}

caption: {
  fontSize: '0.75rem',   // 12px
  fontWeight: 400,
  lineHeight: 1.66,
  letterSpacing: '0.03333em',
}

overline: {
  fontSize: '0.75rem',   // 12px
  fontWeight: 400,
  lineHeight: 2.66,
  letterSpacing: '0.08333em',
  textTransform: 'uppercase',
}

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: [
      'Inter',
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      'sans-serif',
    ].join(','),
  },
});

const theme = createTheme({
  typography: {
    fontSize: 16, // Base font size (default: 14)
  },
});

const theme = createTheme({
  typography: {
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 600,
    fontWeightBold: 800,
  },
});

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '4rem',
      fontWeight: 700,
      lineHeight: 1.2,
    },
    button: {
      textTransform: 'none', // Remove uppercase
      fontWeight: 600,
    },
  },
});

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: 'Inter, sans-serif',
      textTransform: 'none',
      fontSize: 16,
    },
  },
});

const theme = createTheme({
  typography: {
    htmlFontSize: 10, // Set to 10 for easier rem calculations
  },
});

// Now theme.typography.pxToRem(10) === '1rem'

const theme = createTheme();

// Default calculation: (size / htmlFontSize) * (fontSize / 14)
theme.typography.pxToRem(16); // '1.142857142857143rem'
theme.typography.pxToRem(24); // '1.714285714285714rem'

const theme = createTheme({
  typography: {
    pxToRem: (size) => `${size / 16}rem`,
  },
});

theme.typography.pxToRem(16); // '1rem'

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '2.5rem',
      '@media (min-width:600px)': {
        fontSize: '3.5rem',
      },
      '@media (min-width:900px)': {
        fontSize: '5rem',
      },
    },
  },
});

const theme = createTheme();

theme.typography.h1 = {
  fontSize: '2.5rem',
  [theme.breakpoints.up('sm')]: {
    fontSize: '3.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '5rem',
  },
};

const theme = createTheme({
  typography: (palette) => ({
    fontFamily: 'Inter, sans-serif',
    h1: {
      color: palette.primary.main,
      fontSize: '3rem',
    },
    body1: {
      color: palette.text.primary,
    },
  }),
});

import Typography from '@mui/material/Typography';

function MyComponent() {
  return (
    <>
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="body1">Body text</Typography>
      <Typography variant="button">Button text</Typography>
      <Typography variant="caption">Caption text</Typography>
    </>
  );
}

letterSpacing: `${round(letterSpacing / size)}em`

const theme = createTheme({
  typography: {
    fontFamily: 'Inter, sans-serif',
    // Letter spacing will NOT be applied
  },
});

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false; // Disable h3 variant
  }
}

const theme = createTheme({
  typography: {
    poster: {
      fontSize: '4rem',
      fontWeight: 700,
    },
  },
});