Getting Started with CSS Typography Title Utility

WBOY

Release： 2023-09-04 08:01:13

forward

1143 people have browsed it

入门 CSS 版式标题实用程序

Typography is an important part during the creation of websites and applications. It is mainly used to display most of the content to the user. It determines the tone and tone of your website’s content.

So, it is likely to affect the overall user experience. The title in any website is the center of attraction for any user. Therefore, it is very important that it looks perfect to improve the readability of your website or app. In this article, we will create a header using Primer CSS.

The Chinese translation of

Primer CSS

is:

Primer CSS

Primer CSS is a versatile and popular CSS framework that provides developers with easy-to-use typography capabilities. It is an open source design system created by GitHub. Using typography utilities will enhance the visual appearance and consistency of your website.

Typesetting Title utility allows developers to select the font size, color and weight of titles as per the requirement.

To use Primer CSS in your web pages, you can install it from npm -

npm install --save @primer/css

Copy after login

In this article, we use CDN links.

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">

Copy after login

Typesetting Title Utility

The Typographic Title Tool is a set of predefined built-in classes that enable developers to style titles for their website or application. You can add these classes to any element (except ) and convert it into a header in the desired style.

As we already know, we have 6 header classes of different sizes. They start from h1 to h6. The sizes decrease in the same order.

grammar

<div class= "h1"> </div>

Copy after login

The Chinese translation of

Example

is:

Example

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      h1 {
         color: orange;
         text-decoration: underline;
         font-family: Calibri;
      }
   </style>
</head>
<body>
   <h1> Primer CSS Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of heading utilities as provided by Primer CSS. <p class="h1"> This is the heading of class "h1" </p>
      <p class="h2"> This is the heading of class "h2" </p>
      <p class="h3"> This is the heading of class "h3" </p>
      <p class="h4"> This is the heading of class "h4" </p>
      <p class="h5"> This is the heading of class "h5" </p>
      <p class="h6"> This is the heading of class "h6" </p>
   </div>
</body>
</html>

Copy after login

In this example, we display the text in the h1-h6 class of the title utility.

The Chinese translation of

Example

is:

Example

If you apply these classes to any heading element (e.g.

,

, etc.), it will follow the style rules of the class. This means that the font size of the corresponding title utility class will be followed. Let us understand through an example.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: Georgia;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Heading Utilities </h1>
   <div class="container">
      <h1 class="h6"> This is h1 element with class "h6" </h1>
      <h2 class="h5"> This is h2 element with class "h5" </h2>
      <h3 class="h4"> This is h3 element with class "h4" </h3>
      <h4 class="h3"> This is h4 element with class "h3" </h4>
      <h5 class="h2"> This is h5 element with class "h2" </h5>
      <h6 class="h1"> This is h6 element with class "h1" </h6>
   </div>
</body>
</html>

Copy after login

Here we apply the h6 class to the

element. But as we can see, the font size is based on the h6 class. Likewise, we have h2, h3, h4, h5 and h6 elements.

Marketing typesetting title tool

The marketing typography tools used in Primer CSS enable marketing developers and designers to create visually appealing brand marketing content such as product landing pages, advertisements, and more.

It represents the brand identity and vision for customers. Primer CSS also defines a set of classes for such purposes. These classes are responsive but different in a way. They are used as defined marketing fonts.

grammar

<div class= "h0-mktg"> </div>

Copy after login

The Chinese translation of

Example

is:

Example

In the marketing layout tool, we have 7 title classes. They are h0-mktg to h6-mktg. Let’s see an example −

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      CSS code * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }
   </style>   
</head>
<body>
   <h1 class="heading"> Primer CSS Marketing Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of marketing heading utilities as provided by Primer CSS. <p class="h0-mktg"> This is the heading </p>
      <p class="h1-mktg"> This is heading of class "h1-mktg" </p>
      <p class="h2-mktg"> This is the heading of class "h2-mktg" </p>
      <p class="h3-mktg"> This is the heading of class "h3-mktg" </p>
      <p class="h4-mktg"> This is the heading of class "h4-mktg" </p>
      <p class="h5-mktg"> This is the heading of class "h5-mktg" </p>
      <p class="h6-mktg"> This is the heading of class "h6-mktg" </p>
   </div>
</body>
</html>

Copy after login

In this example, we show the text in the h0.mktg -h6.mktg class of the Marketing Heading Utilities of Primer CSS.

in conclusion

In this article, we discussed Primer CSS Typography Heading Utilities and how it simplifies the life of developers. It makes web design easier by using predefined classes. We also see slightly different marketing layouts. It helps us create visually appealing product landing pages and ads. With various responsive design features, developers can produce high-quality and user-friendly websites with improved readability.

The above is the detailed content of Getting Started with CSS Typography Title Utility. For more information, please follow other related articles on the PHP Chinese website!