Design your web app with Ant Design Typography

Whenever you look at a poster or read any text, the first thing your mind notices after pictures are the text. People change the font styles like size and weight or font family in their mobile phones, desktops, and laptops to make them more visually appealing. Typography is a technique used to choose any font styling to make your texts easily readable and visually appealing to the readers. Typography beautifies the content and pleases the readers’ eyes.

Typography

Typography is a handful of technique that finds their way even in the field of computer science while we develop mobile or web applications. We use typography to design text components like headings, sub-headings, simple texts, or paragraphs and their variations. In this blog, I will illustrate how you can take the help of the Ant Design UI component to design a reusable typography component. You can tweak the CSS here and there according to your design and use these custom designs anywhere in your existing or upcoming projects.

Typography using ANT design

Typography in Ant Design has four sub-sections: Title, Text, Link, and Paragraph. As the name suggests, the Typography Title is to give a heading to a component. Its use is similar to that of heading tags in HTML. It has five levels. The first is the default level, i.e., 1 representing the H1 HTML tag. The numbering goes down to 5, which depicts the H5 HTML tag. It has additional properties which enable users to edit the text from their end, show lengthy texts as ellipses, or disable the content. It also has a property that, on setting it as active, will enable the users to copy the content with a mouse click.

One of the ways to use Ant Design Typography Title is:

import { Typography } from 'antd';

const export TitleRenderer = ()={
return(
  <>
    <Typography.Title>h1. Ant Design</Typography.Title>
    <Typography.Title level={2}>h2. Ant Design</Typography.Title>
    <Typography.Title level={3}>h3. Ant Design</Typography.Title>
    <Typography.Title level={4}>h4. Ant Design</Typography.Title>
    <Typography.Title level={5}>h5. Ant Design</Typography.Title>
  </>,
)};

Another way to design a Title and probably an easier way is:

import { Typography } from 'antd';

const { Title } = Typography;

const export TitleRenderer = ()={
return(
  <>
    <Title>h1. Ant Design</Title>
    <Title level={2}>h2. Ant Design</Title>
    <Title level={3}>h3. Ant Design</Title>
    <Title level={4}>h4. Ant Design</Title>
    <Title level={5}>h5. Ant Design</Title>
  </>,
)};

The above code results in something like this:

Different levels in Typography Title

The Ant Design Typography Text enables us to convert simple texts into variants. We can have a text with success design, a warning, or a danger. Our text can have a disabling effect, a cross-through effect, a highlighted effect, and a couple more design effects. The AntD Typography Link, on the other hand, can be used as a hyperlink that can redirect to different URLs. The following code demonstrates the use of Text and Link components. The code is also available in the Ant Design docs. It also has an ellipsis property which can hide lengthy texts.

import { Typography, Space } from 'antd';

const { Text, Link } = Typography;

const DisplayRenderer = ()=>{
  return(
    <Space direction="vertical">
      <Text>Ant Design (default)</Text>
      <Text type="secondary">Ant Design (secondary)</Text>
      <Text type="success">Ant Design (success)</Text>
      <Text type="warning">Ant Design (warning)</Text>
      <Text type="danger">Ant Design (danger)</Text>
      <Text disabled>Ant Design (disabled)</Text>
      <Text mark>Ant Design (mark)</Text>
      <Text code>Ant Design (code)</Text>
      <Text keyboard>Ant Design (keyboard)</Text>
      <Text underline>Ant Design (underline)</Text>
      <Text delete>Ant Design (delete)</Text>
      <Text strong>Ant Design (strong)</Text>
      <Link href="https://ant.design" target="_blank">
        Ant Design (Link)
      </Link>
    </Space>
)};

The above code results in the following result.

Different text designs and link text

Finally comes the Ant Design Paragraphs. As the name suggests, this component finds its use in displaying descriptions or content summaries, or lengthy texts to the user. It also has similar properties like Title and Text components. The documentation for the Paragraph component is simple and is present in Ant Design docs.

I faced quite a challenge in changing the CSS for Title Component. This was because the components come with inbuilt styles which we cannot override. If we want to change the font size or font weight, we can give !important to the CSS which needs to be overridden.