Seamless Digital Experience.
Happy Customers.

Digital Experience and Error Monitoring Platform - Zipy

How to use Typography in Material-UI React

Anom Warbhuvan
~ 10 min read | Published on Jan 24, 2024





TABLE OF CONTENT

Fix bugs faster with Zipy!

  • Session replay
  • Network calls
  • Console Logs
  • Stack traces
  • User identification
Get Started for Free

Typography is a critical aspect of any design project, and Material-UI React provides a powerful and flexible way to incorporate typography into your applications. Our purpose today is to explore the essentials of utilizing typography in Material-UI React and how to customize typography effectively for your project.

What is typography?

Typography refers to the arrangement, style and overall look of printed matter. In website design practices, typography is critical because it maintains uniformity across all pages on a site. Moreover, incorporating appropriate typographical elements enhances the reader’s experience with well-presented materials that are easy to read & use. Typography includes everything from font choice and size to spacing and line height.

Why typography matters for design?

The visual impact of any composition largely depends on typography—just like it does on the six principles of design. Typography impacts the overall visual composition and aesthetics of a design. It creates exceptional designs because it helps express unique ideas that resonate with viewers' emotions. Here are several reasons to it:

  • Communication: Typography serves as a visual language, allowing designers to effectively convey messages and information. Designers can enhance readability and ensure that the intended message is clearly communicated to the audience.
  • Visual Hierarchy: Just as the principles of design establish a visual hierarchy, typography helps structure the content within a design. By manipulating factors like font size, weight, and style, designers can guide the viewer's attention and create a sense of order.
  • Brand Identity: Typography plays a significant role in defining and reinforcing a brand's identity. Consistency in using specific typefaces and typographic styles across various design materials helps establish a recognizable and cohesive brand image.
  • Aesthetics and Visual Appeal: Typography significantly contributes to the visual appeal of a design. Thoughtful font choices can evoke certain feelings, evoke nostalgia, or create a sense of modernity.
  • Differentiation: In a crowded design landscape, typography helps designs stand out. By utilizing unique or custom typefaces, designers can create a distinct visual identity that sets their work apart.
  • Accessibility: Good typography improves accessibility by ensuring that content is easily readable for everyone, including those with visual impairments or reading difficulties.

Good vs Bad typography in UI design

Here is the distinction between the different elements of typography based upon good and bad factors.

Good typography Bad typography
Readability Easy to read Text is hard to read
Hierarchy and scale Clear hierarchy to guide user through the content No clear distinction between different levels of content
Consistency Using a compatible typeface on a website can establish a cohesive cool and feel Different fonts, sizes or styles can create a chaotic and unprofessional look
White space To create separation between elements and reduce clutter No white space can make the content feel crowded and overwhelming
Color To highlight important information and create contrast. Too many colors don’t provide contrast.
User experience Content is more digestible and visually pleasing. It detracts from the overall visual appeal.

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Getting started with material UI typography

Material-UI React provides a typography component that allows you to easily incorporate typography into your applications. It provides you with the freedom to select and modify various typographic elements to achieve the desired look and feel. This is the reason why it is termed to be flexible and customizable to fit your project's needs.

Follow the below steps to create a basic typography app in your editor.

Step 1: Create a React app named as ‘zipytypography’.

    
npx create-react-app zipytypography

Step 2: Switch your directory to the file you just create above

    
cd zipytypography

Step 3: After you have changed the directory, open App.js file in your editor. To use typography in Material-UI React, import the modules from the Material-UI/core package in App.js.

    
import { makeStyles, Card, CardContent } from "@material-ui/core"; import Typography from "@material-ui/core/Typography";

Step 4: Once you have imported typography, you can use it in your React components. Now, let us understand typography variants.

Typography variants refer to the different variations or styles of a typeface that are available within a font family. Here are some common typography variants:

  • Weight Variants: Typefaces often come in various weights, such as light, regular, medium, bold, and extra bold. These weight variants allow designers to emphasize different elements of the text and create visual hierarchy within the design.
  • Width Variants: Some typefaces offer different width options, such as condensed or extended variants. These variants allow designers to adjust the horizontal space occupied by the text, enabling them to fit more or less content within a given area.
  • Style Variants: Style variants include different variations of a typeface that may have distinct characteristics, such as italics, oblique, or decorative versions. These variants can add emphasis, provide contrast, or convey a specific aesthetic tone within the design.
  • Small Caps: Many typefaces offer small capital letter variants, which are smaller versions of uppercase letters. Small caps are often used for stylistic purposes or to enhance typographic consistency within a design.
  • Numerals: Some typefaces provide different numeral styles, such as proportional figures (varying widths) or tabular figures (uniform widths). These numeral variants are useful in different contexts, such as aligning numbers in tables or maintaining consistent spacing within text.
  • Ligatures: Ligatures are special characters that combine two or more individual characters into a single typographic form. They are designed to improve the appearance and readability of certain letter combinations

We have covered most of the typography variants in our app using the variant prop to specify its type. Now, we have completed all the steps regarding installation of different packages needed. So now, let’s look at the theming part a bit.

Customizing Material UI typography

While Material-UI React provides several predefined variants for typography, you may want to customize the typography to fit your project's specific needs. Material-UI React provides several ways to customize typography, including using custom fonts and modifying the typography theme.

What are custom fonts?

Custom fonts are web fonts that allow designers to go beyond the limited set of default system fonts. They can choose unique typefaces that align with their branding, enhance the visual aesthetics, and create a distinctive look and feel for their web content.

When are custom fonts needed?

Custom fonts are needed in various situations where designers want to achieve specific design goals like consistency, visual appeal, readability and maintain branding.

Using custom fonts

To use custom fonts in Material UI for your React app, you need to import the font files and create a new typography theme with the custom fonts. Here's an example of how to use a custom font in Material-UI React. The font families included here are just to specify the fonts which can be used to style the variant. You need to just pick one at the time of coding.

    
import { makeStyles } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; const useStyles = makeStyles({ typography: { fontFamily: [ 'Roboto', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ].join(','), }, }); function App() { const classes = useStyles(); return ( ); } export default App;

This code defines a custom style using the makeStyles function from the Material UI library. The style is applied to the typography component and sets its font family to a combination of multiple font families separated by commas.

The join method is used to concatenate these font families into a single string, which is then passed as a value to the fontFamily property. Our program's design makes certain that even if specific fonts are not on a user's computer, there are backup font choices available. This approach ensures seamless performance and eliminates potential problems.

Typography theme

This theme refers to a set of typographic rules, guidelines, and visual styles that are applied consistently throughout a design project or across a website. With the help of this, you can govern the selection, organization of typefaces, fonts, spacing, sizes, and other typographic elements.

Modifying typography theme

You can also modify the typography theme to customize the typography in Material-UI React. Typography theme allows you to configure fontFamily, fontWeight, fontSize, etc.

Here's an example of how to modify the typography theme in Material-UI React:

    
import { makeStyles, Card, CardContent } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; const useStyles = makeStyles({ typography: { h1: { fontFamily: 'Roboto', fontWeight: 500, fontSize: '4rem', lineHeight: 1.5, }, // You can add styling to your respective variants as we have added to h1 tag }, });

In the above code, we have just modified the h1 variant. We have assigned various typographic elements to h1 variant. The fontFamily used is Roboto among the ones which we have suggested above, then fontWeight, fontSize, lineHeight can also be chosen from your own preference.  You can also modify other variants in the theme to use it in your program.

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Implementing all the stylings using <Typography /> in App.js file

    
import { makeStyles, Card, CardContent } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; import "./App.css"; const useStyles = makeStyles({ typography: { fontFamily: [ "Roboto", "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ].join(","), }, }); function App() { const classes = useStyles(); return ( <div className="classs"> <Typography variant="h1" gutterBottom className="titles"> How GitHub Copilot is helping developers? </Typography> <Typography variant="h5" gutterBottom> Anom Warbhuvan </Typography> <Typography variant="overline" display="block"> ~ 6 min read | Published on Jun 05,2023 </Typography> <Typography variant="p" gutterBottom className="heavysize"> We have lately seen rapid growth in the field of artificial intelligence. And GitHub got on board early to change how developers have been working. GitHub Copilot is a powerful AI tool designed to assist developers like you. With its ability to generate code suggestions and assist developers in real-time, Copilot has become a game-changer in the coding landscape. </Typography> <br></br> <br></br> <Typography variant="h3" gutterBottom> What is GitHub Copilot? </Typography> <Typography variant="body1" gutterBottom className="heavysize"> GitHub Copilot is an AI-powered coding tool developed by OpenAI in collaboration with GitHub. It analyzes vast amount of code from open-source repositories with the help of machine learning. With its ability to understand your coding style and context, GitHub Copilot serves as your trusted companion. It also offers an array of ingenious hacks and techniques to enhance your coding journey. </Typography> <Typography variant="h3" gutterBottom> Features of GitHub Copilot </Typography> <Typography variant="h4" gutterBottom className="headersize"> 1. Increase productivity with code generation </Typography> <Typography variant="body2" gutterBottom className="heavysize"> GitHub Copilot excels at generating code snippets instantly. It is able to understand your context of coding and suggests ready-to-use code snippets. It takes input in the form of context from the code editor where it is integrated. This input can be as simple as a few keywords or a partial code statement. Copilot then uses its understanding of coding patterns, libraries, and best practices to propose completions, refactorings, or entire code blocks that it believes are relevant to the provided context. With this, you can also save valuable time and effort as it eliminates the need for manual coding. </Typography> </div> ); } export default App;
  • This code imports several components from the Material-UI library, including makeStyles, and Typography.
  • It defines a custom style using the makeStyles function and sets the fontFamily property of the Typography component to a combination of font families that include Roboto, sans-serif, Apple Color Emoji, Segoe UI Emoji, and Segoe UI Symbol.
  • The App function renders the return function with several Typography components inside it.
  • Each Typography component has a different variant specified, ranging from h1 to overline, which controls the size and weight of the text.
  • Some Typography components also have additional properties specified, such as align, color, display, and gutterBottom, which control various aspects of the text's presentation.
  • One Typography component has a custom class specified using the classes object returned by the useStyles hook, which allows for further customization of its styling.
  • The text displayed in the Typography components promotes a product called Zipy that helps developers in fixing bugs faster.
  • The last line of the code exports the App component as the default export.
  • To activate and utilize the application, use the following command from the root directory of the project. You can use this command below:
    
npm start

Running app

You can check the result below for the placing of different variants including their spacing, alignment, font-size, font-family and more. It showcases all the variants which we used in App.js following typographic theme system.

material UI typography in react

Best Practices

When it comes to Material-UI typography for React, there are several steps which you can follow to ensure a consistent and visually appealing design. Here are some practices:

  • Use the Typography componen: Material-UI typography component serves as a foundation for consistent and accessible typography across your application. You can choose styles and variants for multiple text categories on this service like headings, paragraphs, or buttons.
  • Establishing a typographic hierarchy: Define a clear hierarchy for your typography to help users understand the content structure. Material UI typography component offers variants like h1, h2, h3, subtitle1, body1, which you can leverage to establish a hierarchy.
  • Efficient readability: Choose fonts, font sizes, and line heights that enhance readability. Ensure there is enough contrast between the text and background colors. Most important, don’t use small font sizes, decorative fonts, or low contrast combinations which makes the text hard to read.
  • Customize typography styles: If you need to deviate from the default typography styles provided by Material-UI, you can customize them using the MuiTypography rule in the theme. This allows you to override various style properties like font family, size, weight, color, etc.

These are a few practices considered for creating visually pleasing and accessible typography in Material UI.

Empower web accessibility with Material UI typography components

Ensuring web accessibility is crucial to make digital experiences inclusive and usable for individuals with various disabilities, including visual impairments. When it comes to typographic accessibility, Material UI Typography components offer built-in support for accessibility props like aria-label and aria-describedby.

These props enable developers to enhance the accessibility of typographic elements and provide additional information to assistive technologies. For individuals with visual impairments or other disabilities, proper typographic accessibility is vital.

Material UI recognizes this importance and provides tools to improve the accessibility of typographic content. By referring to the official Material UI documentation, developers can gain a comprehensive understanding of implementing accessibility props effectively. By leveraging these components and accessibility props, developers can create typographic content that is inclusive and accessible to all users.

For more detailed implementation guidelines, I encourage referring to the official Material UI documentation, which provides valuable insights into creating accessible typography components.

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Conclusion

Till now, we have discovered that Material UI's Typography component offers a simple and intuitive way to implement typography in React applications. With just a few lines of code, you can structure text elements according to the desired typographic hierarchy and achieve consistent styling throughout our project.

But, it doesn’t stop here, Material UI React provides theme customization options, empowers developers to harness the power of typography while maintaining consistency and accessibility. For more information, head over to our Material UI guide blog.

Happy Coding!

Call to Action

Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore for your app, you can sign up or book a demo.











Fix bugs faster with Zipy!

Get Started for Free

You might also like

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Want to solve customer bugs even before they're reported?

The unified digital experience platform to drive growth with Product Analytics, Error Tracking, and Session Replay in one.

SOC 2 Type 2
Zipy is GDPR and SOC2 Type II Compliant
© 2023 Zipy Inc. | All rights reserved
with
by folks just like you