H+ Tag

The H+ Tag app allows you to easily add an h1, h2, h3, h4, h5, or h6 to any page on your Weebly site.

Customize the color, font, alignment, size, mobile size, capitalization, thickness, bottom margin, or font family of your header tags.

Size recommendations for each header tag can be found by hovering over the "[ i ]" next to "size" setting in the app. You have complete control over the sizing for each header tag.

By default, all header tags are set to "desktop" for mobile sizing. As you would gather, this means that the mobile size of your header tags will remain the desktop size unless you choose another mobile sizing option.

You have the freedom to make the header tags any size you want for desktop and mobile. For example, even though h2 tags are normally smaller than h1 tags, you can customize an h2 to be bigger then an h1 tag. This applies to both desktop and mobile sizing.

If you choose to keep the header tags proportionally sized to each other for mobile, make sure that you select the same mobile option (e.g., large, medium, small) for all your header tags. For example, you may apply the mobile size setting "large" to both an h4 and h5 tag but they'll be different sizes on mobile -- proportional (1/4 em less per header tag) to the font size applied to your theme's body tag.

To break this down even further, assume the font size of your theme's body tag is 12px. If you applied the "small" setting to all header tags, the h1 would be 28px because its "small" mobile size setting is 2em (i.e., 2em x 12px). The h2 would be 21px because its "small" mobile size setting is 1.75em (i.e., 1.75em x 12px). The h3 would be 18px because its "small" mobile size setting is 1.5em (i.e., 1.5em x 12px). The same math can be applied to the remaining header tags.

Add 1/4em to each header tag's "small" mobile setting to get the font size of the next largest mobile size setting. For example, the h1 tag's "small" mobile size setting is 2em, so its "large" mobile size setting would be 2.25em (i.e., 1/4em + 2em).

Weebly's "Title" element is an h2 tag, but with the H+ Tag app, you have an additional h2 tag that which you can apply different settings to from the "Title" element if you choose.