Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Make Beautiful Design with Material-UI Typography Tutorial and Ex.

What is the Typography in Material UI?

Material UI Typography is a component library and system for managing typography in React applications, particularly those built using the Material-UI framework. Material-UI is a popular open-source library that provides pre-designed UI components following Google’s Material Design guidelines.

As part of the Material-UI library, it offers a set of predefined typography styles and components. It simplifies the process of styling and managing text elements in your user interfaces. This library includes various text styles, such as headings, paragraphs, and labels, designed to be visually consistent and aesthetically pleasing.

Key features include:

  • Typography Variants: It provides a range of predefined variants for different types of text elements, like headings (h1 to h6), body text, and captions.

  • Responsive Typography: It is designed to be responsive, ensuring that text scales appropriately across different screen sizes and devices.

  • Custom Theming: You can customize typographic styles using the theme configuration to match your application’s design requirements while maintaining consistency.

  • Text Color and Contrast: The library takes into account text color and contrast guidelines to ensure that text remains readable and accessible.

  • Typography Components: It includes React components, such as `<Typography>`, making it easy to incorporate consistent and well-designed typography into your application.

What’s the Goal of Typography?

Typography is the art and technique of arranging and designing text in a visually appealing and effective manner. It involves the selection of typefaces (fonts), font sizes, letter and line spacing, and other typographic elements. As a result, typography conveys information, evokes emotions, and enhances the readability and aesthetics of written content.

Good typography takes into consideration factors such as legibility, readability, hierarchy, and overall visual harmony. It involves making intentional decisions about the arrangement of text elements, including headings, subheadings, body text, captions, and more. The goal of typography is to make the text both easy to read and visually engaging, while also reflecting the intended tone and message of the content.

What is Typography in UI Design?

This involves choosing fonts, sizes, colors, and layouts to create visually pleasing and user-friendly digital interfaces. It affects readability, hierarchy, and the overall user experience. Key aspects include font selection, size consistency, color contrast, alignment, and responsiveness while maintaining a consistent and accessible design. Effective typography in UI design enhances usability and reinforces brand identity.

The Importance of Typography and Why You Should Use It

Why we use Typography in material UI?

  • Enhances Readability: Choices like font and spacing make text easy to read and understand.

  • Elevates Aesthetics: It enhances the visual appeal of designs, making them more attractive.

  • Reinforces Branding: Consistent font usage reinforces a brand’s identity across different materials.

  • Establishes Hierarchy: Varying font sizes and styles help prioritize content and guide the reader’s eye.

  • Ensures Clarity: Clarity prevents confusion and misinterpretation of information.

  • Boosts Accessibility: This aids readability for all, including those with visual impairments.

  • Demonstrates Professionalism: Careful choices convey professionalism and attention to detail.

  • Differentiate Content: Uniqueness can make your work stand out and be memorable.

  • Works Across Media: It is essential in both print and digital design.

  • Evokes Emotions: Font choices can convey emotions and cultural connotations.

  • Supports Consistency: Consistency creates a unified and professional look.

  • Improves User Experience: Well-chosen typography enhances how users engage with content and design.

Getting Started with Typography in Material UI

To use Material-UI in your web development project, you’ll need the following requirements:

  1. Ensure you have Node.js installed on your computer, as it includes npm (Node Package Manager) by default. Alternatively, you can use Yarn, another package manager, for managing dependencies. You can download Node.js from the official website: https://nodejs.org/

  2. To write and edit your JavaScript and JSX code, you’ll require a code editor. Commonly used options encompass Visual Studio Code, Sublime Text, Atom, and WebStorm.

Installing Material UI

  • Installing Material UI with npm

    To install with npm, run the following command in the terminal.

      npm install @mui/material @mui/icons-material
  • Installing Material UI with yarn

    To install with yarn, run the following command in the terminal.

      yarn add @mui/material @mui/icons-material

    This command installs the core packages and icons often used in Material-UI applications.

Installing a Font Family

To install a custom font family for your web project, here’s a general overview of the process:

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/your/font.woff2') format('woff2'),
       url('path/to/your/font.off) format('off);
  font-weight: normal;
  font-style: normal;
}

As shown above, replace ‘CustomFont’ with the desired font family name and provide the correct paths to your font files in the URL property.

Once you’ve defined the @font-face rule, you can apply the custom font to your text using CSS. Then, specify the font-family property with the same name you used in the @font-face rule:

body {
  font-family: 'CustomFont', sans-serif;
}

Different Methods of Working with Fonts with Material UI Typography

There are several methods for working with fonts, depending on your design needs and the platform you are working on. Here are some common methods:

  • System Fonts: These are pre-installed on a user’s device or operating system. Correspondingly, they are readily available for use in your web application without the need for any additional downloads or configurations. But Material-UI, by default, uses system fonts, which ensures compatibility across various devices and browsers. As a result, this method is straightforward and ensures consistent rendering.
  • Web Fonts: Import fonts from services like Google Fonts.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
  • Font Files: Host custom font files on your server or CDN.

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.woff2') format('woff2');
}
  • CSS @font-face Rule: Define custom fonts using the @font-face rule.

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.woff2') format('woff2');
}
body {
  font-family: 'CustomFont', sans-serif;
}
  • Third-Party Libraries: Some third-party libraries and frameworks, like Material-UI in React, provide built-in support for fonts. This generally allows you to easily integrate and customize font families within your application.

  • Local Fonts: You can also use fonts installed on a user’s local system in desktop applications. However, keep in mind that font availability may vary between systems, so it’s important to provide fallback fonts.

Using the Material UI Typography Component

1. Headings: You can use the Typography component to create headings of different levels (h1, h2, h3, etc.) to establish a visual hierarchy in your content.

import { Typography } from "@mui/material";

export const Example = () => {
  return (
    <div>
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
    </div>
  );
} 

2. Body Text:

The Typography component is ideal for rendering regular body text with consistent styling.

import { Typography } from "@mui/material";

export const Example = () => {
  return (
    <div>
      <Typography variant="body1">
        Body 1
      </Typography>
      <Typography variant="body2">
        Body 2
      </Typography>
    </div>
  );
} 

3. Custom Styles:

Furthermore, you can apply custom styles to Typography components to match your project’s branding and design.

import { Typography } from "@mui/material";

const custom style = {
  fontSize: '20px',
  fontWeight: 'bold',
  color: 'blue',
};

export const Example= () => {
  return (
    <Typography variant="body1" style={customStyle}>
      Customized text with a bold and blue style.
    </Typography>
  );
} 

4. Color Variants:

Material-UI provides predefined color variants to apply to text.

import { Typography } from "@mui/material";

export const Example = () => {
  return (
    <div>
      <Typography variant="body1" color="primary">
        Primary Text
      </Typography>
      <Typography variant="body1" color="secondary">
        Secondary Text
      </Typography>
      <Typography variant="body1" color="error">
        Error Text
      </Typography>
    </div>
  );
} 

5. Responsive Typography:

import { Typography } from "@mui/material";

export const Example = () => {
  return (
    <div>
      <Typography variant="h1">
        Large Heading (Adjusts for smaller screens)
      </Typography>
      <Typography variant="body1">
        This text adapts to different screen sizes for readability.
      </Typography>
    </div>
  );
}

6. Accessibility:

Material-UI Typography components are designed with accessibility in mind, ensuring proper semantic markup and accessibility attributes.

import { Typography } from "@mui/material";

export const Example = () => {
  return (
    <Typography variant="h2" aria-label="Page Title">
      This title is accessible for screen readers.
    </Typography>
  );
}

Typography Component Props

Typography Color prop

The `color` prop lets you easily apply colors to a text element. Use it to maintain a consistent color scheme, highlight important text, and enhance your UI’s visual appeal.

Here’s how to use the `color` prop:

  1. Primary Color:

    <Typography variant="h1" color="primary">Primary Heading</Typography>
  2. Secondary Color:

    <Typography variant="body1" color="secondary">Important information here.</Typography>
  3. Custom Colors:

    <Typography variant="h2" style={{ color: '#FF5733' }}> Custom Color Heading </Typography>

As shown above, you specify the color using a hexadecimal code.

Typography Line-break Prop

The `line-break` prop controls line breaks. It’s useful for ensuring text wraps correctly within components. Use it for automatic, manual, or customized line breaks as needed. Here’s how to use the `line-break` prop:

  1. Auto Line Breaks (Default):

    <Typography variant="body1"> This is a long sentence that will automatically break into multiple lines if it exceeds the container width. </Typography>
  2. Manual Line Breaks:

    <Typography variant="body1"> This is a sentence with a <br /> manual line break. </Typography>

Align Prop

The `align` prop manages text alignment. Set it to ‘left’, ‘center’, ‘right’, or ‘justify’ to control how the text aligns within the component, optimizing visual presentation.

Here’s how to use the `align` prop:

  1. Default Alignment (Left):

    <Typography variant="body1"> This is left-aligned text. </Typography>
  2. Center Alignment:

    <Typography variant="body1" align="center"> This is center-aligned text </Typography>
  3. Right Alignment:

    <Typography variant="body1" align="right"> This is right-aligned text. </Typography>
  4. Justify Alignment:

    <Typography variant="body1" align="justify"> This is justified text. It stretches to fill the entire width of its container.</Typography>

Children Prop

The `children` prop lets you add extra content like icons or links within text. It’s handy for creating dynamic and interactive UIs by combining text with a supplementary element. So, here’s how to use the `children` prop:

  1. Adding Text and Other Elements:

    <Typography variant="body1"> <span>🚀</span> Launch Now </Typography>
  2. Links and Buttons:

    <Typography variant="body1"> <a href="/dashboard">Go to Dashboard</a> </Typography>
  3. Complex Components:

    <Typography variant="body1"> <CustomButton label="Click me" /> </Typography>

Classes Prop

The `classes` prop allows you to apply custom CSS classes for precise text styling. Use it to tailor the appearance of a text element beyond the default Material UI style. Here’s how to use the `classes` prop:

  1. Defining Custom Classes:

    /* styles.css */ .customText { font-size: 20px; color: #FF5733; /* Add other custom styles here */ }
  2. Applying Custom Classes:

    <Typography variant="body1" classes={{ root: 'custom text' }}> This text uses a custom CSS class. </Typography>
  3. Multiple Classes:

    <Typography variant="body1" classes={{ root: 'custom text', paragraph: 'customParagraph' }}> This text has custom styles. </Typography>

Component Prop

The `component` prop lets you change the underlying HTML element for text rendering. Use it to select a semantic HTML element that best matches your content or design requirements, ensuring proper structure and styling. Here’s how to use the `component` prop:

  1. Default HTML Element (Typography):

    <Typography variant="h1"> This is an h1 element by default. </Typography>
  2. Changing the HTML Element:

    <Typography variant="h1" component="span"> This is a span element with h1 styles. </Typography>
  3. Semantic HTML Element:

    <Typography variant="body1" component="blockquote"> "To be or not to be, that is the question." </Typography>

Gutter Bottom Prop

The `gutterBottom` prop adds spacing below a text element. It’s a simple way to enhance content layout. It also provides visual separation between text components for improved readability and aesthetics. So, here’s how to use the `gutterBottom` prop:

  1. Adding Default Spacing (No Prop):

    <Typography variant="body1"> This text has no spacing below. </Typography>
  2. Using the Gutter Bottom Prop:

    <Typography variant="body1" gutterBottom> This text has spacing below. </Typography>
  3. Custom Spacing with CSS (Advanced):

    <Typography variant="body1" gutterBottom style={{ marginBottom: '20px' }}> This text has custom spacing below. </Typography>

noWrap Prop

The `noWrap` prop prevents text from wrapping to the next line, ensuring it stays on a single line within its container. Use it when you want to maintain text’s single-line presentation, often suitable for titles or headers. So, here’s how to use the `noWrap` prop:

<Typography variant="body1" noWrap>

  This is a long sentence that will stay on a single line even if it exceeds the container width

</Typography>

This can be useful for titles, headers, or other cases where line breaks are undesirable.

Paragraph Prop

The `paragraph` prop is designed for body text. It adds spacing between paragraphs, improving readability and visual separation in longer text blocks, such as articles or descriptions.

<Typography variant="body1" paragraph>
  This is the first paragraph.
</Typography>

sx Prop

The `sx` prop allows you to apply custom styling directly to the component using the sx prop.

<Typography variant="body1" sx={{ color: 'blue', fontSize: '16px' }}>

  Custom styled text with the sx prop.

</Typography>

Variant Prop

The `variant` prop specifies the typography style for the text. Here’s a brief example:

<Typography variant="h4"> This is a heading with variant h4. </Typography>

Variant Mapping Prop

The `variantMapping` prop allows you to customize the mapping between variant names and the actual CSS classes used for styling. Here’s a brief example:

<Typography variant="customVariant"> This text uses a custom variant. </Typography>

How to Add Colors in the Material UI Typography Component

Material-UI provides several predefined color options that you can use with the color prop. These include primary, secondary, error, textPrimary, and textSecondary. Here’s how to use the color prop:

import React from 'react';
import Typography from '@material-ui/core/Typography';

const ColorTypography = () => {
  return (
    <div>
      <Typography color="primary">Primary Color Text</Typography>
      <Typography color="secondary">Secondary Color Text</Typography>
      <Typography color="error">Error Color Text</Typography>
      <Typography color="textPrimary">Text Primary Color Text</Typography>
      <Typography color="textSecondary">Text Secondary Color Text</Typography>
    </div>
  );
}

export default ColorTypography;

What CSS is Applied for Material UI Typography Components?

  • Variant: Variant can be used to control whether the text is displayed in small-caps, all small letters, or normal font style. The values can be “normal,” “small-caps,” or “all-small-caps.”

  • Text Alignment: Text alignment can vary based on the component’s variant, with headings often being centered or left-aligned and body text typically being left-aligned.

  • Text Transformation: The line height is usually set to ensure proper vertical spacing between lines of text, promoting readability.

  • Font Weight: The font-weight can vary depending on the variant. For example, heading variants (h1, h2, etc.) are often bolder than body text.

  • Font Size: The font size is set according to the variant (e.g., h1, h2, body1, body2) and is responsive to the device’s screen size.

  • Font Style: determines the style of the font, such as “normal” (default) for regular text or “italic” for italicized text.

  • Font Family: Material-UI uses the Roboto font family by default for a text element. The specific font may vary depending on the variant and theme.

  • Letter Spacing: Letter spacing can be adjusted for specific variants, enhancing readability or achieving a specific design effect.

  • Line Height: The line height is usually set to ensure proper vertical spacing between lines of text, promoting readability.

Wrapping Up

In this article, we covered what typography is, how to work with Material UI typography, and we looked at ways in which the Material UI typography can be styled.

If you’d like to learn more about Material UI typography, I’d recommend you watch the video tutorials below:

Be the first to know about our launch!

We are launching our collection of 10,000+ AI-generated custom components for you to choose from for your next web project. Sign up now at Purecode.ai for you to be notified once we launch 🚀

Shadrach Abba

Shadrach Abba