Typography plays a crucial role in crafting visually engaging and readable websites. With the release of WordPress 6.7 RC, users can now fine-tune their site’s typography using the new Font Size Presets—a feature that introduces powerful support for Responsive Font Sizes WordPress block editor. This update is a game-changer for anyone aiming to create a cohesive, professional design across all devices—without writing any custom CSS.
What’s new in the font size presets?
The new Font Size Presets control simplifies the process of adjusting text sizes, allowing you to choose from a set of predefined options: Small, Medium, Large, Extra Large, and Extra Extra Large. With fluid typography options now integrated, text sizes can automatically adjust based on screen or viewport size, ensuring that your content remains legible and visually balanced across devices. And it gets even better you can also add custom font size presets! This feature provides ultimate flexibility, allowing you to create your own presets to perfectly match your design requirements or brand guidelines. Whether you need a slightly larger font for headings or a unique text size for specific elements, it makes it easy to set custom values that are just right for your site.
How to use the Responsive Font Sizes WordPress Block Editor
How to Set Up Responsive Font Sizes WordPress
Following these easy steps, you can take full advantage of the new typography features:
1. Open the WordPress Site Editor
Firstly, log into your WordPress dashboard and open the Site Editor. Then, locate the Styles panel on the right side.
2. Access Typography Settings
Under Styles, click Typography. Here, you will find settings for fonts, font sizes, colors, and backgrounds.
3. Use the Font Size Presets
The Font Size Presets section shows various predefined sizes. Choose one, such as “Large,” to apply or customize it further.
4. Enable Fluid Typography
Next, toggle on Fluid Typography. Consequently, your font sizes will scale automatically depending on the viewport size, ensuring excellent readability on all devices.
5. Adjust Custom Fluid Values
For even greater control, set custom minimum and maximum font sizes for each preset. This way, your text remains perfectly balanced across small and large screens.
6. Add Your Own Custom Presets
Finally, to add a new font size:
- Click the + button in the Font Size Presets section.
- Name your custom preset.
- Define a default font size.
- Enable Fluid Typography.
- Set custom fluid values (minimum and maximum sizes).
Thus, you can create typography tailored specifically to your website’s design.
Try Responsive Font Sizes WordPress Instantly with WordPress Playground
Testing these features is simple with WordPress Playground. It is a browser-based, setup-free environment where you can preview your site’s design changes immediately.
Experiment with Responsive Font Sizes WordPress today, and see how fluid typography can dramatically improve your website’s design and user experience.
Leave a Reply