---
# System prepended metadata

title: Baseui responsive typography

---

# Baseui responsive typography

theme.js
```jsx
// Create custom theme
import { createTheme, lightThemePrimitives } from 'baseui';

// Responsive typography
const overrides = {
  typography: {
    HeadingXXLarge: { // H1
      [mediaQuery.small]: {
        fontSize: '28px',
      },
      [mediaQuery.medium]: {
        fontSize: '36px',
      },
      [mediaQuery.large]: {
        fontSize: '48px',
      },
    },
  },
};

const customTheme = createTheme(lightThemePrimitives, overrides);
```

Root.js
```tsx
// Pass custom theme to theme provider 
<ThemeProvider theme={customTheme}>
  {...}
</ThemeProvider>
```