Blogzine Typography

Learn more about beautiful blogzine auto typography system

Blogzine typography is a beautiful typography system powered by Tailwind typography to automatically setup a perfectly readable system for your single posts/articles. Our Blogzine typography is a responsive typography inbuilt module which is most beneficial to create powerful user experience to your website visitors.

1. Get started

To get started with our Blogzine design set, you have to enable Blogzine powered typography in Manage modules area in OxyMade plugin dashboard page.

Enable Blogzine powered typography
Enable Blogzine powered typography

2. Blogzine typography settings

Once your have enabled the Blogzine powered typography in your manage modules area, you need to click on Manage button and open the Blogzine settings slide-over panel to configure settings.

Blogzine settings panel
Blogzine settings panel

You need to configure the base typography sizing for each breakpoint and then click on Save typography settings to apply typography to your single posts.

3. Adding Blogzine class to the single blog post template in Oxygen

Adding Blogzine class to the inner content single blog post template

You need to configure the base typography sizing for each breakpoint and then click on Save typography settings to apply typography to your single posts.

Wrap inner content with a div and add the blogzine class
Wrap inner content with a div and add the blogzine class

4. Explanation of each typography setting

Base typography size options are the sizes of our typography settings. We have 5 different sizes typography to setup for each breakpoint.

Inbuilt responsive typography

So if you setup typography settings as mentioned below, your blog single post will display 24px font size in desktop, 20px in the Tablet landscape, 18px in the Tablet portrait, 16px in the Mobile landscape and 14px in the Mobile portrait.

  • 2xl - 24px base size is the largest typography size (24px font size) which is most suitable for Tablet and desktop devices.

So if you set 2xl base font size for the General desktop breakpoint, the single post font size reflects the full blog post with 24px default font sizing. All the child elements in the blog post depends on the 24px base font size for the desktop and above breakpoints.

  • xl - 20px base size is the 20px base font size typography which is most suitable for Tablet devices.

So if you set xl base font size for the Tablet landscape breakpoint, the single post font size reflects the full blog post with 20px default font sizing in the Tablet landscape view.

  • lg - 18px base size is the 18px base font size that is most suitable for Tablet portrait or phone landscape breakpoints.

So if you set xl base font size for the Tablet portrait breakpoint, the single post font size reflects the full blog post with 18px default font sizing in the Tablet portrait view.

  • md - 16px base size is the 16px generic font size suitable for any thing.

So if you set xl base font size for the Mobile landscape breakpoint, the single post font size reflects the full blog post with 16px default font sizing in the Mobile landscape view.

  • sm - 14px base size is the smallest font size we have which might be suitable for mobile devices.

So if you set xl base font size for the Mobile portrait breakpoint, the single post font size reflects the full blog post with 14px default font sizing in the Mobile portrait view.

← Blogzine Intro
Blogzine Modules →