Fluid typography

Setup type scale and generate all the typography classes on the fly with auto fluid line heights.

We have released a powerful fluid typography editor in our framework to generate perfect type scale powered typography and fluid typography with auto line heights.

Activate Fluid Typography#

Click on the Fluid text settings link in Base Design Set Box in your OxyMade dashboard page. This will open up a slide over with various default settings to power your website’s fluid typography.

All the settings/inputs you see in that panel are self explanatory and easy to understand/configure.

1. HTML font size:

Default value we use is 62.5%, which equals to 10px base font size for browsers. Changing it modify every REM value in the website. Paddings, margins, font sizes etc. So please do not change it. If you know what you are doing, do it with caution.

2. Base font size for Desktop:

Default value we use is 1.6REM, which equals to 16px body font size. If you would like to increase the body font size, you can use higher values here.

3. Mobile font base size:

This is the default base font size for mobile devices. We use this size and the base font size for desktop to apply fluid font size for body.

4. Responsive text decrease ratio:

We use this number to power up the fluid typography for text size classes, text-xs to text-9xl. If you use 0.7 here, we multiply each text utility font size with 0.7 and take that value as a base font size for mobile device and setup a fluid typography for those classes using those two values.

5. Smallest font size:

This font size will be the smallest font size we use in any device for any text utility class.

6. Headings font weight:

This is the default font weight for all the heading classes. Hero & H1 to H6.

7. Desktop type scale ratio:

We use the value from this selection and generate all heading classes with perfect font sizes to use in your website. Minor Third, Major third are most preferable. This is to generate type scale based headings for desktops only.

8. Mobile type scale ratio:

We use this value to calculate mobile only type scale based headings. And we use desktop & mobile values to create a perfect fluid typography for headings.

9. Viewport Min size:

We automatically take the minimum viewport size from Oxygen settings. But if you want to enter a different viewport size, you can enter it in rem value here. For ex: if you want fluid typography until 320px viewport size, enter 32 here.

10. Viewport Max Size:

This is the maximum viewport size we need to apply fluid typography for. We get this viewport max size from Oxygen settings. But if you want to modify it, you can do it here.

11. Line heights for 13px to 150px:

Text line height for 13px to 16px. Only use a number that will be multiplied with the current font-size to set the line height. We automatically apply the line height based on these settings to all heading & text classes. If any heading or text size is between these numbers, we automatically apply this line height to that class.

That’s all. Please contact us if you have any doubts.