Fluid Typography in CSS 💧

Kunal Singh

Aug 15, 2021

What is Fluid Typography?

When your font size changes according to the size of the window then we call it as a fluid typography.

There are several ways to make your fonts fluid across all resolutions in your websites. Here are 5 ways that I use regularly in my projects with examples.

Enough talk lets see the code

You can check this codepen for live example of all the points covered in this blog

See the Pen Responsive Typography CSS by Kunal SIngh (@singhkunal2050) on CodePen.

Good Old Media Queries @media-queries

media-queries may not be the most fluid of all these methods since they are based on changing the size based on breakpoints of window but they do come in handy and get the job done most of the time.

/* 1. With Media Queries */
.media h2{
font-size:2rem;
}
.media p{
font-size:1.2rem;
}
/* Setting breakpoint for changing font size */

@media (max-width:768px) {
.media h2{
font-size:1.5rem;
}

.media p{
font-size:.8rem;
}
}

Using Relative Units vw vh and %

This method uses relative units like percentage, vw and vh, we can set the font size on the basis of parent container(with %) or we can use the vw/vh unit which sets the sizes relative to the window. Although this method gives a completely fluid typography it has some pitfalls which we'll cover in the next point.

/* Using Relative % Units */

.relative-units h2{
font-size:5vw;
}

.relative-units p{
font-size:2.5vw;
}

Using CSS funtions clamp() and calc()

The most annoying part of using a relative unit is we can not set any upper/lower limit to the values that we want. This problem is solved with the clamp() function and the calc() function comes with its own advantage of allowing us to do mathematic operations with our units like 10vw + 10px , 40%+ 2rem etc

/* Using clamp() , calc() & minmax() */
/* When this method is combined with relative units it gives the best results */

.css-functions h2{
font-size:calc(1.8rem + 2vw);
/* gives min/max size 👇 */
font-size:clamp(1.8rem, 5vw , 2.5rem );
}

.css-functions p{
font-size:clamp(.8rem, 4vw , 1.5rem );
/* does not give min/max size 👇 */
font-size:calc(.7rem + 1vw);
}

Using CSS Variables

Remember how we used media queries to swap font sizes on the basis of window width? Using the same technique with css variables gives you the same feature with a little better code maintance option. Lets see how.

/* Using CSS Variables */

/* Setting Up Default Font size Variables */
:root{
--heading-2:2rem;
--content:1rem;
}

/* Overidding Variables with Media Queries */

@media(max-width:768px){
:root{
--heading-2:1.54rem;
--content:.7rem;
}
}

.css-var h2{
font-size:var(--heading-2);
}

.css-var p{
font-size:var(--content);
}

I hope you learned something new today if you did then please share this post with your friends who might find this useful aswell. Have any questions? Feel free to connect with me on LinkedIn Twitter @singhkunal2050. You can also write me here.

Happy Coding 👩‍💻!

Recommendations

Are You Still Using Basic CSS? Here Are 7 Tricks to Get Ahead of the Curve

#css

Bored of the same old CSS? Unleash 7 hidden gems to take your designs to the...

Dec 27, 2023

Easiest way to store your logs in a file WITHOUT chaging the source file(node)

#productivity

Often, developers face challenges when dealing with a flood of logs in the...

Dec 21, 2023

Build Your Own Pinterest-Style Masonry Grid: A Step-by-Step Guide

#css

,

#web

,

#layout

Create a masonary grid layout with left to right content flow, supporting...

Dec 10, 2023

Using git diff and git apply to Share Local Changes with Peers

#git

,

#productivity

,

#software_engeneering

,

#dev

git diff and git apply are two powerful Git commands that can be used to share...

Nov 12, 2023

React Portals: Render Components Outside the current DOM Hierarchy

#react

,

#web

The createPortal API in React allows you to render child elements into a...

Jul 27, 2023

Cloning Made Easy: Try degit and Clone Directories within Repos.

#git

,

#productivit

Have you ever faced the dilemma of wanting just a small portion of a repository,...

Jul 19, 2023

Debugging Web Apps with Browser Dev Tools: 6 Amazing Tricks

#browser

,

#debugging

,

#web

Debugging web applications can be a challenging task, with errors like...

Jul 13, 2023

Controlled Versus Uncontrolled Components in React

#react

,

#forms

Understanding State Management Within Forms Comparing controlled and...

Nov 5, 2022

Format Numbers, Dates and Currencies with the Intl Object in Javascript

#javascript

,

#html

,

#web

Intl object can be used to format data into commonly used formats of dates,...

Sep 13, 2022

Image Masking on Hover Using CSS Clip Path and Javascript

#javscript

,

#css

,

#html

Image Masking can be used to add fancy hover highlight effects to images for...

Jul 23, 2022

Recreating CSS Tricks Fancy Grid Hover Effect

#html

,

#css

,

#UI

,

#recreation

CSS Trick had a simple yet cool grid layout which I found dope. So lets try to...

May 21, 2022

File Explorer Recursive React Component

#react

,

#javascript

,

#web

How to create a recursive folder Component using react.

Apr 16, 2022

Add Google Fonts to Your React & NextJS + TailwindCSS Project (Next 14)

#css

,

#tailwindcss

,

#react

,

#nextjs

,

#tailwind

,

#design

Use Google Fonts in Your TailwindCSS Projects

Apr 6, 2022

Event Delegation in Javascript

#javscript

,

#css

,

#html

,

#web

,

#performance

Handling multiple Events in Javascript with minimal CPU Usage

Mar 6, 2022

A Simple Web Accessibility Trick that you most probably missed!

#html

,

#css

,

#web-accessibility

,

#user-experience

Imagine that you cannot use the mouse and have to Navigate a Website with the...

Dec 23, 2021

Top Terminal Commands I Use For Productivity

#linux

,

#cli

,

#terminal

The whole point of development is solving problems. But very often we Developers...

Nov 3, 2021

CSS Logical Properties

#css

,

#html

CSS logical properties are properties which are used to design element on the...

Oct 5, 2021

CSS Units in a Nutshell 🐚

#css

,

#html

Are you still writing your css units in pixels and percentages? if you are then...

Aug 8, 2021

Master Markdown in 5minutes ⌚

#markdown

,

#documentation

Markdown is a lightweight markup language for creating formatted text using a...

Aug 1, 2021

What is JAMStack ✨

#jamstack

Jamstack stands for Javascript APIS and Markup and it is based on this idea of...

Jul 31, 2021

+

Check my latest Blog Post

Are You Still Using Basic CSS? Here Are 7 Tricks to Get Ahead of the Curve

Read Now
Oh My Gawwdd!!!!!!!

Wow you have been viewing my site since 20 seconds!

+
+