Fluid Values

Today's users require that your website content be as responsive as possible.

Ideally, your website content should flow freely across all screen resolutions and sizes so that it looks great on all devices.

This is why Cwicly has introduced fluid values so that you can set your defaults between which your content will adapt to different screen sizes effortlessly and without you having to do anything each and every time.

This will save you time, resources and effort.

Fluid Typography

Fluid typography allows you to choose how your font properties (size, line height) scale fluidly to different screen sizes automatically within the limits you set.

To access fluid typography, select a text block and navigate to the Primary or Design tab.

Open the Typography tab and find the font size property.

Click on the size value field to open the dropdown.

Select Fluid Typography at the bottom.

This will open a Fluid value Maker modal where you can adjust the maximum and minimum values for different browser sizes.

Current Preview

The Current property displays the typography size being used at the moment.

The slider underneath can be moved to show how the font size changes depending on the screen size within the limits that you set.

Root Font Size

The standard root font-size of browsers is 16px.

You can adjust this with caution as required.

Copy/Paste Fluid Value

The Copy and Paste properties allow you to copy the current configuration for use elsewhere.

Font Size

Allows you to adjust the minimum and maximum font sizes for minimum and maximum viewports.

View Width

Allows you to adjust the minimum and maximum view width for different viewports.

Font-size Clamp

Generates a linear scale that allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.

There is also an accessibility reading that is highlighted and should be greater than 1 for accessibility purposes.

Last updated