Typography ✍
In this kit, a lot of meticulous work has been put in the study of typography. It fits perfectly into any device with minimal effort.
You can see how the fluid typography algorithm works in the "typography" file inside stylesheets.
You can see how the fluid typography algorithm works in the "typography" file inside stylesheets.
In the typography file, the root font size (REM value) is updated according to viewport width.
This is done with a clamp function. Clamp function takes care of the current REM value, and allows us to keep it in a range between a min and a max value according to the device size.
This is done with a clamp function. Clamp function takes care of the current REM value, and allows us to keep it in a range between a min and a max value according to the device size.
Video tutorial
REM units
This kit uses REM units to make every single element fully responsive.
In the typography style sheet you find the magic algorithm that allows the root font to change dynamically and make this possible.
You can read more about REM units here.
In the typography style sheet you find the magic algorithm that allows the root font to change dynamically and make this possible.
You can read more about REM units here.
Scale Algorithm
Before thinking about the exact size that titles and texts should have, it is even more important to define a scaling algorithm.
It's an easy step to do and a huge help to have a great typography.
A great tool to calculate the ideal scaling algorithm for your website based on REM units is Type-Scale.
Choose what you think is the right one for your website.
Choose the right algorithm!Choose what you think is the right one for your website.
Once you have found the right algorithm, change all the sizes of your titles and fonts in the global settings. By default, the algorithm is "Minor Third".
Pro Tip - Font Pairing 🤝
With Oxygen Builder it is possible to choose a font for the titles and one for the texts. Take full advantage of this feature and choose your fonts wisely.
You can use an awesome to effectively choose the perfect font pairing: FontJoy
Font Pairing ToolYou can use an awesome to effectively choose the perfect font pairing: FontJoy