DESIGN FRAMEWORK PRESETS
Global & Theme Styles
01. Typography
Font size, style, and weight does as much for your design personality as anything else. Here you’ll find suggested sizes but feel free to change settings according to your font choice. Add font name, size, weight and line height for each style. Add color if it’s part of the headline. You’re also welcome to have 2 different colors for a headline, for example light and dark backgrounds, as long as you keep it consistent.
TEXT / Body
Font Name:
Font Weight:
Font Size Desktop: 18 px
Font Size Tablet: 17 px
Font Size Mobile: 16 px
Line Height: 1.6
Paragraph Spacing: 1.4 em
USE: Main body copy, best for text-heavy pages like blog posts.
Note: Suggested font size works for most fonts, but depending on your font choice you might need to go 2 points larger. Keep your visitors in mind. You don't want to make them strain their eyes. For comparison the website Medium.com, a text-heavy page, has a default article text size of 21 px.
The body font size is the base for all the others. That is why they are set in pixels and the others are set in ems, which are related to the font size. So if your size is 18px, then 18px = 1em.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Heading 1 / H1
Font Name:
Font Weight:
Font Size Desktop: 3.4 em
Font Size Tablet: 2.6 em
Font Size Mobile: 2.3 em
Line Height: 1.2
USE: Page Title, Post Title
Note: Use only one H1 on your page and post. The presence of more than one H1 dilutes the SEO power of a single H1, where you use your main page/post keyword.
This is heading number one
Heading 2 / H2
Font Name:
Font Weight:
Font Size Desktop: 2.8 em
Font Size Tablet: 2.3 em
Font Size Mobile: 2 em
Line Height: 1.2
USE: Section Title, Post Subhead
Note: Before using H2, make sure you already used H1 as a main page title.
This is heading number two
Heading 3 / H3
Font Name:
Font Weight:
Font Size Desktop: 2.3 em
Font Size Tablet: 2 em
Font Size Mobile: 1.8 em
Line Height: 1.3
USE: Section Subhead, Post Sub-Subhead.
Note: Only use H3 after you've used H2, respecting hierarchy.
This is heading number three
Heading 4 / H4
Font Name:
Font Weight:
Font Size Desktop: 1.7 em
Font Size Tablet: 1.6 em
Font Size Mobile: 1.5 em
Line Height: 1.4
USE: Intro Paragraphs, Post Subhead.
Note: Only use H4 after you've used H2 and H3, respecting hierarchy.
This is heading number four
Heading 5 / H5
Font Name:
Font Weight:
Font Size Desktop: 1.3 em
Font Size Tablet: 1.3 em
Font Size Mobile: 1.2 em
Line Height: 1.5
Note: For smaller size headlines, use serif or sans serif typefaces. Stay away from script or display typefaces.
This is heading number five
Heading 6 / H6
Font Name:
Font Weight:
Font Size Desktop: 1.1 em
Font Size Tablet: 1.1 em
Font Size Mobile: 1.1 em
Line Height: 1.6
Note: For smaller size headlines, use serif or sans serif typefaces. Avoid script, decorative, or display typefaces.
This is heading number six
Body SMALL
Font Name:
Font Weight:
Font Size Desktop: 16 px
Font Size Tablet: 15 px
Font Size Mobile: 14 px
Line Height: 1.4
Use: Mostly used for footer body copy. This version is 2 pixels smaller than the main body copy. Can also be used for short form writing like short sentences or paragraphs in pages' sections. Depending on your font, both this and the caption version can be the same. If so, delete one to avoid repetition.
LINK
Color:
Color Hover:
Weight:
Weight Hover:
Decoration:
Decoration Hover:
Style:
Style Hover:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
ACCENT
Font Name:
Font Weight:
Font Size Desktop:
Font Size Tablet:
Font Size Mobile:
Line Height:
Use: These are optional and most of the time are decorative, like handwriting or script fonts. Use them with caution and only for up to 3-4 words. Used mostly to capture your visitors attention.
Welcome!
OVERLINE (H1 & H2)
Font Name:
Font Weight: Bold
Letter Spacing:
Transform: Uppercase
Font Size Desktop:
Font Size Tablet:
Font Size Mobile:
This is an overline
This is heading number two that goes under the overline.
OVERLINE (H3, H4, H5)
Font Name:
Font Weight: Bold
Letter Spacing:
Transform: Uppercase
Font Size Desktop:
Font Size Tablet:
Font Size Mobile:
This is an overline
This is heading number four that goes under the overline.
02. Buttons
Include the button styling for both when hover or click, generally you would have a consistent style for all of your interactive elements of your site so you may only need to add one or two examples for both light and dark backgrounds if your brand includes it. Include at least 2 different sizes for different purposes (large, attention-grabbing CTA buttons, and smaller, not so important, “Read More” style buttons.)
BUTTON (LIGHT AND DARK BGS)
Font Name:
Font Weight: Bold
Letter Spacing: 1.2
Transform: Uppercase
Font Size Desktop:
Font Size Tablet:
Font Size Mobile:
Use: Button font-size (and the button overall) varies depending on its relevance. For example, buttons to view more under a blog title are not as relevant as a button that offers a download or book a call, and stands on its own inside a section. Minimum font size is 16px for the less relevant buttons.
03. Image & Caption
Generally a brand will utilise either photography or illustration for their imagery (sometimes even both). The style of imagery is just as important to the personality as the subject matter. Use this setting to define the use of captions as well.
CAPTION
Font Name:
Font Weight: Regular
Letter Spacing: Between 0.5 and 1
Font Size Desktop: 14 px
Font Size Tablet: 13 px
Font Size Mobile: 12 px
Line Height: 1.2
04. Forms
Define how your lead generation and contact forms will look like. Think about where you will eventually have them (footer, blog post, popup, etc) and create at least two versions to match the background, light or dark. In this template there will the basic settings from the Theme Settings, but you can go inside each widget and add extra individual settings on the forms. You’ll then be able to Save them as a
Email Optin 1
Contact form
05. All Together
Generally a brand will utilise either photography or illustration for their imagery (sometimes even both). The style of imagery is just as important to the personality as the subject matter. Use this setting to define the use of captions as well.
All TOgether
This is an overline
This is an example of the headline style.
For blog posts, you might want to use an attention-grabbing first paragraph, with a bit larger and bold font. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- Simply dummy text
- Printing and typesetting industry
- Lorem Ipsum
- Type specimen book
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Extra: Form Examples
The forms below are just a few examples of what you can do to create a customized look for your form. Check out the different settings and the addition of other widgets, like the heading widget.
Email Optin 1
Subscribe to Get Free
Weekly Tips
Email Optin 2
Subscribe to Get Free Weekly Tips
Email Optin 3
Contact form
