Menu

Today, I stumbled across an article from CSS Tricks, that mentioned the concept of Fluid Type. Fluid Type allows you to use CSS to make sure all text on your website is scaling according to the device you’re viewing it on. In this post, I will attempt to create a set of CSS-rules that can be implemented in Elementor.

Mission:
Define two classes – one for headers, one for paragraphs – that makes all typography scale fluidly across different viewports. The solution must work with Elementor for WordPress.

In an average workday, I spend around 4-6 hours in “WordPress-mode”, working on clients websites. As a designer in my team, my responsibility is first and foremost to make sure that pages I produce look good, which in 2019 means that design should also be responsive, so that users can browse the websites I make from whatever device they like.

During this proces there are a lot of things to work on – one of them being type/typography. With tools like Google Fonts readily available, typography is a joy to work with, as the posibilities for enhancing your design are pretty much endless. In this post, I explore the concept of fluid type. The goal is to create a set of CSS-rules that will make type look good across all devices and resolutions. As my team uses Elementor for WordPress, the solution has to work with the built-in Elementor blocks (Heading/Text).

Why work with Fluid Type?

Responsive pages have to work across a wide array of different resolution and devices, which breaks typography that is not formatted correctly. Luckily, that’s where Fluid Typography comes in.

With Fluid Typography designers can use modern CSS-patterns to create typography that automatically scales to fit the viewing device.

I’ve worked with fluid type on projects before, but haven’t used it in quite a while, primarily due to the tools I’m currently using (those tools being WordPress and Elementor). Neither of these tools prohibit me from working with CSS in any way or form, which is why this little project seems like a nice idea.

If I manage to find a viable solution, I will be able to save a lot of time and hazzle, and most importantly; make sure that every project I work on looks good!

Working with Elementor

Working with Elementor has plenty of benefits. First of all, it makes designing a website pretty simple – even for designers without basic coding skills. That being said, it also makes more advanced animations and styling difficult.

Editing text/headings in Elementor allows you to set font family, size, transform, line-height, letter spacing etc. In addition, setting up the responsiveness of the text requires you to manually set the size of the text across both desktop, tablet and phone resolutions. This also means, that you have to adjust the size of the text THREE TIMES, if you want to make sure it looks nice on all platforms.

Finding a nice fluid-setting for my type is thus a huge time saver.

Gif of text being edited in Elementor pluging for WordPress
Editing typography in Elementor requires you to edit the font-size for both desktop, tablet and phone resolutions.

Using “calc()”

One of the things that makes fluid type possible is the calc()-function in CSS. With calc(), we are allowed to make calculations on a lot of the basic measurement units directly in our stylesheet.

/* property: calc(expression) */
width: calc(100% - 80px);

The reason we are using calc() is mainly that it allows us to use a static unit of measurement like px/em/rem and pair it with a dynamic unit of measurement like vh/vw/%.

This means that we are able to make a solution that takes into account the size of the view (vw), and adjusts the font based on parameters we set.

The final solution

The solution below is a modified version of the CSS-snippet from CSS Tricks mentioned earlier. I have only modified the original slightly, as the formula is pretty much perfect for the purposes and intents I have.

.elementor-heading-title {
    font-size: calc(18px + (120 - 40) * ((100vw - 300px) / (1980 - 300)));
}

/* Modified slightly to increase size at smaller screens */
.elementor-heading-title {
    font-size: calc(12px + (140 - 40) * ((80vw - 100px) / (1980 - 300)));
}

Fluid Body Text

For the Body type, I found a snippet here, that I intend to test out.

p {
font-size: calc(14px + 8 * ((100vw - 320px) / 960));
}

p {
font-size: calc(14px + (24 - 20) * ((100vw - 400px) / (1980 - 400)));
}

How it works

When I use the CSS-snippet mentioned above, all paragraph- and heading-blocks I use within Elementor will automatically inherit the size from the Fluid Type-script. This means, that I don’t have to adjust the font-size across all device viewports, which CAN be a tedious task, if you’re not systematic in your approach.

Using the Fluid Type-snippets above works as the default style for all new elements, but will be overwritten as soon as I change the settings of the heading- and paragraph-blocks in Elementor. This is actually pretty nice, as It allows me to keep my main headings and paragraph sections in the same style across the site, while still allowing me to add custom typographic styles to the templates I’m working on.

In the coming weeks, I will be testing this method, in order to see if it’s actually a viable way of working with typography.

Comments (0)

Leave a comment

Your email address will not be published. Required fields are marked *