React.js Blueprint Typography Usage

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;

Output:

Reference: https://blueprintjs.com/docs/#core/typography.usage