Typography

Use typography to present your design and content as clearly and efficiently as possible.

Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

General

The Rajdhani font will not be automatically loaded by Aurity System Design. The developer is responsible for loading all fonts used in their application. Rajdhani Font has a few easy ways to get started.

Rajdhani Font CDN

Shown below is a sample link markup used to load the Rajdhani font from a CDN:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,700&display=swap"
/>

Install with npm

You can install it by typing the below command in your terminal:

 //with npm
 $ npm install typeface-Rajdhani --save

 //with yarn
 $ yarn add typeface-Rajdhan

Then, you can import it in your entry-point.

⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Aurity System DesignCD default typography configuration only relies on 300, 400, 500, and 700 font weights.

Component

Theme

In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the typography keys of the theme.

Changing the semantic element

The Typography component uses the variantMapping property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.

• You can change the underlying element for a one time occasion with the component property:

{
  /* There is already an h1 in the page, let's not duplicate it. */
}
;<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

• You can change the mapping globally using the theme:

const theme = createMuiTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
})

Custom font

Rajdhani is the custom font used by Aurity on text components:

Applying the font manually

const customText = <Text style={{ fontFamily: 'Rajdhani' }}>Hello world</Text>