{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/responsive-typography-with-css-clamp-function/", "result": {"data":{"markdownRemark":{"html":"

Without writing media queries, we can make font sizes responsive with just a single line of code, using the CSS clamp() function.

\n

With clamp(), font sizes dynamically scale with the size of the viewport, but do not go below a minimum font-size or above a maximum font size.

\n

We can use the clamp() function for sizing other design elements as well.

\n

The clamp() function takes three parameters in a specific order:

\n\n

Let’s create a card using the clamp() function.

\n
src/App.js
\n
import React from "react"\n\nconst App = () => {\n  return (\n    <div className="card">\n      <h2>Learn TypeScript</h2>\n      <p>\n        Typed JavaScript at any scale. Catch errors and provide fixes before you\n        run your code.\n      </p>\n      <ul>\n        <li>JavaScript and More</li>\n        <li>A Result You Can Trust</li>\n        <li>Gradual Adoption</li>\n      </ul>\n    </div>\n  )\n}\n\nexport default App
\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n  font-family: sans-serif;\n}\n\n.card {\n  width: clamp(15rem, 40vw, 30rem);\n  padding: 2rem;\n  border: 0.1rem solid gray;\n  border-radius: 1rem;\n  margin: 3rem auto 0 auto;\n  box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem rgba(0, 0, 0, 0.2);\n}\n\nh2 {\n  font-size: clamp(1.4rem, 2.5vw, 6rem);\n  margin-bottom: 1rem;\n}\n\np {\n  font-size: clamp(1.2rem, 1.4vw, 2.5rem);\n  margin-bottom: 1rem;\n  color: gray;\n}\n\nul {\n  list-style-type: circle;\n}\n\nul li {\n  padding: 0.1rem;\n  margin-left: 3rem;\n  font-size: clamp(1.1rem, 1.2vw, 2rem);\n  font-style: italic;\n}
\n

In the code snippet above, we have set the width of the card and font sizes of the heading, paragraph and list items using the clamp() function.

\n
\n

Note: The value of the viewport width (VW) unit is relative to the viewport width, so 1.5vw, for example, is 1.5% of the width of the viewport.

\n
\n

If we open the card in responsive design mode in a browser, and take a look at the card at different viewport sizes, we will see that the font sizes and the card width dynamically scale with the size of the viewport. And the best part is we haven't used media queries at all.

\n

On viewport sized 1330px X 1024px

\n

\n \n \n \n \n

\n

On iPad

\n

\n \n \n \n \n

\n

On iPhone 6/7/8

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n .synthwave-84 { background-color: #262335; }\n .synthwave-84 .mtk8 { color: #72F1B8; }\n .synthwave-84 .mtk1 { color: #FFFFFF; }\n .synthwave-84 .mtk3 { color: #FF7EDB; }\n .synthwave-84 .mtk10 { color: #FEDE5D; }\n .synthwave-84 .mtk16 { color: #FF8B39; }\n .synthwave-84 .mtk6 { color: #36F9F6; }\n .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n .synthwave-84 .mtk14 { color: #B6B1B1; }\n .synthwave-84 .mtk5 { color: #F97E72; }\n .synthwave-84 .mtk9 { color: #FE4450; }\n .synthwave-84 .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n","frontmatter":{"title":"Responsive Typography With CSS Clamp() Function","date":"2021-06-18"}}},"pageContext":{"slug":"/responsive-typography-with-css-clamp-function/","prev":{"fields":{"slug":"/learn-typescript-types/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/understanding-classes-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}