Typography
Typography is probably one of the most important (if not the most important) parts of your design. The Gridd theme includes a dedicated section for your typography settings, with settings that allow you to make decisions and achieve a great result easy and efficiently.
To access the typography settings for your site, you can go to Customizer ➡️ Typography.
By default custom font-families are disabled. To enable them you can check the "Custom Body Typography" and "Custom Headers Typography" settings. Once you do, you will have access to all available Google-Fonts.
The Gridd theme uses a fluid-typography system. That means that you can make your font-sizes adjust to the visitor's device. There are 3 global controls that allow you to control font-sizes for your website:
The "Body Font-Size" control allows you to select a base font-size for your content. All other font-sizes are calculated based on the font-size you select in this field.
The "Fluid Typography Ratio" control allows you to achieve responsive typography so that your site and font-sizes scale depending on the visitor’s screen-size. If you set that value to 0, font-sizes will not adapt and the value defined in the "Body Font-Size" control will be used regardless of the screen-size.
Increasing this value will make your font-size increase depending on the screen-size, using the defined font-size as a base, and taking into account the screen-size and the ratio you define.
Font-sizes are calculated using the following CSS:
font-size: calc(var(--font-size) + var(--ratio) * 1vw);In the above CSS, var(--font-size) is the font-size you have defined, and var(--ratio) is the defined ratio.
1vw is defined in CSS as 1/100th of the screen-width, so if you set ratio to 1, then for every 100px of screen-width your users will gain 1px for the font-size. The slider allows for extreme fine-tuning of the ratio value, so you can define a value of 0.25 for example. This will add 1px of font-size for every 400px of screen-width.
If for example you define the base font-size as 16px, and the ratio is set to 0.3, then a user on a 1920px wide screen will get a font-size of 16px + 0.3 * 1920px/100 which is 21.76px. A user on a 1024px wide screen will see a 19.072px font-size and so on.
With typography scales your header sizes are harmonic and proportionate. An H1 header is larger than an H2 header by the same amount that an H2 header is larger than an H3 header, and they all relate to your body font-size.
In the Gridd theme you can choose from one of the most widely-used scales, with more available in Gridd-Plus, along with the ability to use a custom scale.