CSS clamp can be used to add fluid typography to your website with just one line of CSS. This approach enables web developers to use font sizes that are tailored for every device.
The following table uses the 1.250 – Major Third type scale. It provides PX values (and REM values) for heading levels of a typographic scale. It then provides the CSS clamp values for the typography to fluidly scale from the mobile size to the desktop size.
The transition is mobile-first so goes from mobile font size up to desktop font size. The assumed screen widths are 320px (20rem) for mobile and 1920px (120rem) for desktop and the base font size is 16px.
Web developers can generate CSS clamp properties that allow your website to have fluid typography.
Simply enter the minimum mobile font size and desktop maximum font size as well as the minimum mobile screen width and desktop maximum screen size.
The CSS clamp values are then generated allowing you to tailor the font size for every device with one line of CSS code.
CSS clamp allows your website to have fluid typography by transitioning between two font sizes.
CSS clamp uses three functions, two of which are existing minimum and maximum font sizes. The middle value is set to a dynamic value that will change with the width of the screen, such as viewport width (vw).
For example: font-size: clamp(2.440rem, 1.380vw + 2.164rem, 3.820rem);
Fluid typography is a responsive web design technique where the font size adjusts to the screen size.
For example, a heading could be 48px on desktop and 30px on mobile. Fluid typography would gradually increase the font size depending on the screen size. This means that every user will have fonts sized specifically to the size of their device – a tailored, optimised experience for every user.
The fluid typography is calculated using CSS clamp to transition between the maximum and minimum font sizes.
The first part of the calculation is to take the difference between the maximum and minimum font sizes and divide that by the difference between the maximum and minimum screen width.
For example, a maximum font size of 38px, minimum font size of 26px, maximum screen width of 1920px and minimum screen width of 320px would be (38px – 26px) / (1920px – 320px). This means there is an increase in font size of 0.0075px per 1px of screen width. This is then multiplied by 100 to convert the value into a dynamic value such as viewport width e.g. 0.75vw.
The second part of the calculation would be to define the starting point of the dynamic font size – as the minimum screen width usually does not start at 0px. This is calculated by getting the minimum font size and deducting the font size per 1px of screen width (0.0075px) multiplied by the minimum screen width.
For example, minimum font size of 26px, font size per 1px of screen width of 0.0075px and minimum screen width of 320px would be 26px – (0.0075px * 320px). This would mean a starting dynamic font size, based on the minimum screen width, of 23.6px.
The final font size value would be “clamp(26px, 0.75vw + 23.6px, 38px);”.
The desktop body font size is 1.1 multiplied by the mobile body font size. For example, if the mobile body font size is 16px then the desktop body font size would be 17.6px.
The multiplier then increases by 0.1 for each level on the typographic scale. If a website has font H1 to H6 and body copy, then the desktop body font size would be 1.1 multiplied by the mobile body font size. Also, the desktop H6 would be 1.2 multiplied by the mobile H6 font size. For example, if the mobile font size was 16.7px, then the desktop would be 20px.
The dimensions of an iPhone X are 375px by 812px.
In REM, the dimensions of an iPhone X are 23.438rem by 50.75rem.
The dimensions of an HD desktop screen are 1920px by 1080px. In REM, the dimensions of an HD desktop screen are 120rem by 67.5rem.
A large 27-inch iMac screen has a dimension of 2560px by 1440px. In REM, the dimensions of a 27-inch iMac screen are 160rem by 90rem.
If you have new tool idea or a suggestion for improvement, we would love to hear from you today.
Contact Us