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.

Output:

 

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

Output:

 

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