React.js Blueprint Typography Usage

Last Updated : 15 Sep, 2022

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Typography Usage. Typography is used to add text in various different ways to design a web page. The React.js Blueprint provides different types of typography that can be used while developing a web application. There are some guidelines that must be followed while using typography in building web apps and these include:

The default typography text color in all the components is according to the rules of WCAG 2.0 minimum contrast ratio.
If using a custom text color, do make sure the background color has the proper contrast.
To add a different size or style in text, use the classes and variables provided by Blueprint like .bp4-ui-text, $bp4-font-size-large, etc.

Syntax:

<h1 class="bp4-heading">...</h1>
<h3 class="bp4-text-large">...</h3>
<p class="bp4-ui-text">...<p>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure: The Project structure should look like the below:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: Below example demonstrates the usage of font-large and font-small in headings in typography.

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
  
function App() { 
    return ( 
        <div style={{ 
            padding: 20, textAlign: "center", 
            color: "green"
        }}> 
            <h1>ReactJS Blueprint Typography Usage</h1> 
            <div class="bp4-heading" style= 
                {{ color: "black" }}> 
                <h1 class="bp4-text-large"> 
                    GeeksforGeeks 
                </h1> 
                <h2 class="bp4-text-small"> 
                    GeeksforGeeks 
                </h2> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: Below example demonstrates the usage of custom font color and font style in typography.

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
  
function App() { 
    return ( 
        <div style={{ 
            padding: 20, textAlign: "center", 
            color: "green"
        }}> 
            <h1>ReactJS Blueprint Typography Usage</h1> 
            <div style={{ color: "black" }}> 
                <h1 class="bp4-monospace-text"> 
                    GeeksforGeeks 
                </h1> 
                <h2 class="bp4-monospace-text"
                    style={{ color: '#32A467' }}> 
                    Welcome to the world of Coding!</h2> 
            </div> 
        </div> 
    ); 
} 
  
export default App; 