How to create responsive text

Taimoor Sattar

To create a responsive text, we can adjust font properties based on the browser size. On the mobile screen, text should be large enough so that it is easily understand by the reader; and same should follow on desktop and tablets.

We can use three (3) technique in CSS to create responsive text:

  • CSS function (calc)
  • Using Media Query
  • min(), max(), and clamp()

But first… we need to understand how we can define text in HTML and style it using CSS.

In the HTML, we can write text in span, div, headings (h1-h6) elements, etc. We can write text in HTML as below.

<h1 class="text">This is simple text</h2>
<div class="text">This is simple text</div>
<span class="text">This is simple text</span>

In CSS, we can style the text element as below:

.text {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal; /* bold, bolder, lighter */
  font-style: italic; /* normal, oblique */
  font-size: 108%;

  text-align: center;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
  text-transform: lowercase; /* capitalize, uppercase */
  text-indent: 25px;
  text-decoration: underline;

  line-height: 1.4;
  letter-spacing: 4px;
  word-spacing: 10px;

  background-color: #fff;
  color: #000;
}

In the above code, we use CSS properties to style the text element. The below table describes about some of the CSS properties:

Property Description Values
color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
letter-spacing Increase or decrease the space between characters normal, length
text-align Aligns the text in an element left, right, center, justify
text-decoration Adds decoration to text none, underline, overline, line-through
text-indent Indents the first line of text in an element length, %
text-transform Controls the letters in an element none, capitalize, uppercase, lowercase

Now, we have understand how to write text in HTML and style it using CSS. Next, we need to understand how we can adjust these properties based on the browser screen size.

CSS function (calc)

You can adjust the font size when the browser width changes using CSS property calc. The calc function in CSS let you perform calculation based on the mathematical expression. We can adjust the font size on different screen sizes in CSS using calc function as below.

h1 {
  font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  /* font-size: calc(16px + (100vw*0.1)); */
}

In the above CSS code, vw and vh unit stands for viewport width and viewport height.

Using Media Query in CSS

Media Query is used to define the certain break point conditions. When the break point condition occur, certain CSS properties are applied.

For example, in the below code we use media query to adjust the font-size on different browser screen size.

.text {
  font-size: 15px;
}

/* Increse the font size when screen is below 800px  */
@media only screen and (max-width: 800px) {
  .text {
    font-size: 18px;
  }
}

min(), max(), and clamp()

min(), max(), and clamp() are three (3) logical function in CSS.

The clamp() function clamps a value between an upper and lower bound. Parameters are as follow clamp(MIN, VAL, MAX).

.text {
  font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);
}

About the Author

Written by Taimoor Sattar I'm Taimoor Sattar, a full-stack developer, experience to develop websites in React/JavaScript, Node, and HTML/CSS. You should follow them on Twitter. You can contact me on this page.