---
title: "How to Use Fluid Typography in WordPress?"
url: https://nexterwp.com/docs/fluid-typography-in-wordpress/
date: 2023-03-10
modified: 2026-08-26
author: "Aditya Sharma"
description: "Typography is one of the most important elements of design, and when used effectively, it can greatly enhance the visual appeal of your website. Fluid typography is a relatively new..."
image: https://nexterwp.com/wp-content/uploads/2024/05/fluid-typography-in-wordpress-1024x519.jpg
word_count: 484
---

# How to Use Fluid Typography in WordPress?

## Key Takeaways

- Nexter Blocks adds typography units in Clamp, so font sizes respond automatically to screen size or device.
- Clamp code generation uses four fields: Minimum viewport width, Minimum font size, Maximum viewport width, and Maximum font size.
- Heading block typography in Nexter Blocks accepts only the clamp() value after “font-size:”, and the same option appears in any Nexter Blocks block with typography options.

Typography is one of the most important elements of design, and when used effectively, it can greatly enhance the visual appeal of your website. Fluid typography is a relatively new concept in web design that allows font sizes to adjust automatically based on the screen size of the device being used. This means that your website will look great whether it is being viewed on a large desktop monitor or a small mobile phone screen.

In Nexter Blocks, you can add typography units in Clamp, which makes them responsive to changes in screen size or device.

**Best Used For:**

- Blog and editorial sites where body text must stay readable across mobile and desktop without manual breakpoint adjustments- Landing pages with large display headings that need to scale proportionally across viewport widths- Agency and portfolio sites where precise typographic control is required across all screen sizes without custom CSS

***Requirement  - This feature is a part of Nexter Blocks, make sure its installed & activated to enjoy all its powers.***

## How to Generate Clamp code?

To generate the clamp code go to [this link](https://clamp.font-size.app).

Once you are on the page, here you’ll find four fields - 

**Minimum viewport width**: Here you’ll have to add a minimum screen size.

**Minimum font size**: Here you’ll have to mention the minimum font size. This will be the minimum font size when the screen size is at the **Minimum viewport width**.

**Maximum viewport width**: Here you’ll have to add a maximum screen size.

**Maximum font size**: Here you’ll have to mention the maximum font size. This will be the maximum font size when the screen size is at the **Maximum viewport width**.

![font size clamp generator](https://nexterwp.com/wp-content/uploads/2023/03/font-size-clamp-generator.png)

For any viewport size between the maximum and the minimum viewport width, the font size will automatically change according to the viewport width based on the mentioned maximum and minimum font size.

Once you enter the four values it will automatically generate the Clamp code click on the clipboard icon to copy the code.

## How to Use the Clamp Code in Nexter Blocks Block?

Once you add a block on the page, for example, the Heading block, go to the Style tab.

In the **Title** tab, go to Typography click on the settings icon, and select **C** from the **Font Size** dropdown.

This will open an input field to add your clamp code.

You can also click on the **Generate Clamp Code** link to open the Font-size clamp code generator.

Once you have generated the clamp code, copy the code after **font-size:** till the end. 

For example, the generated code is - “**font-size: clamp(1rem, 0.6471rem + 1.8824vw, 3rem);**”

But you should copy only - “**clamp(1rem, 0.6471rem + 1.8824vw, 3rem);**”

Excluding the “**font-size:**”.

Back in the editor, paste the code in the **Font Size** field.

![](https://nexterwp.com/wp-content/uploads/2023/03/nexter-fluid-typography.gif)

> *Note: You’ll find this option with any Nexter Blocks blocks with typography options.*

Now your font size will be fluid based on the screen size.