{"id":51694,"date":"2026-10-07T11:17:02","date_gmt":"2026-10-07T07:47:02","guid":{"rendered":"https:\/\/8899.ir\/web\/?p=51694"},"modified":"2026-10-09T11:28:45","modified_gmt":"2026-10-09T07:58:45","slug":"stp-web-20261007-clamp-en","status":"publish","type":"post","link":"https:\/\/8899.ir\/web\/stp-web-20261007-clamp-en\/","title":{"rendered":"Fluid typography with clamp: readable from mobile to desktop"},"content":{"rendered":"
\n

Fluid typography with clamp: readable from mobile to desktop<\/h2>\n
\n

Goal: make a heading respond to viewport width while respecting a readable minimum and a defined maximum.<\/p>\n

Prerequisite: a test HTML file or HTML block. Use the dedicated practice-title class to avoid changing other headings.<\/p>\n

Run the code below. The three clamp arguments are the minimum, preferred value, and maximum.<\/p>\n

Here, 1.5rem is the minimum and 3rem the maximum. A rem is relative to the root element\u2019s font size.<\/p>\n

The expression 1rem + 2vw supplies the fluid component. A vw equals one percent of viewport width.<\/p>\n

With a 16-pixel root font, a 320-pixel viewport gives a preferred value of 22.4 pixels, so the 24-pixel minimum applies.<\/p>\n

Under the same assumption, an 800-pixel viewport gives 32 pixels, while a 1600-pixel viewport reaches the 48-pixel cap.<\/p>\n

Resize the window gradually. The heading should scale continuously instead of jumping between fixed sizes.<\/p>\n

Replace the heading with a long sentence. Line height and wrapping should keep its lines from overlapping.<\/p>\n

Test at 200% zoom. Combining rem and vw is a starting point; verify actual text enlargement and readability.<\/p>\n

Read Computed font-size in developer tools at the three widths. Investigate root font size or theme overrides if values differ.<\/p>\n

Success check: readable text, no overflow, and clear size limits. Apply the rule to a real page only after testing it there.<\/p>\n

Complete example code<\/h3>\n
<h1 class=\"practice-title\">A title that grows smoothly<\/h1>\r\n<style>\r\n.practice-title {\r\n  font-size:clamp(1.5rem, 1rem + 2vw, 3rem);\r\n  line-height:1.25;\r\n  overflow-wrap:anywhere;\r\n  color:#f4f7fb;\r\n}\r\n<\/style><\/code><\/pre>\n