Author Stack uses a 16px base font-size for content.
Every element of the design is proportionally sized relative to the base font-size.
For example, the post content width is 640px (16px x 40). However, if you change the base font-size to 18px the content width will automatically adjust to 720px wide (18px x 40).
What this means is that you can change a single setting and the entire design will adjust to maintain readability and a beautiful aesthetic.
[insert image comparison between 16px and 18px here]
Some more examples:
- Heading One (H1) – 2.25 * base
- Heading Two (H2) – 1.875 * base
- Heading Three (H3) – 1.5 * base
- Header Padding (vertical) – 1.5 * base
- Footer Padding (vertical) – 1.5 * base
- Content Padding (vertical) – 5 * base
Fine-grain Control
The pre-built designs in Author Stack have been painstakingly chosen to look beautiful and work flawlessly, but we still want to give users complete control over their design, if you want it.
Every element of your Author Stack website has it’s own typography, spacing and color (text and backgrounds) controls.
[insert example of controls here]
Best Practices
For maintainability and consistency it’s better to customize the website globally rather than specific elements.
Global (sitewide) settings change the entire site at once, as opposed to a single element on a single page.
For example, Author Stack comes with six pre-built color schemes. If you change one of the colours in the color scheme, it will be automatically reflected across all the places in the website where that color is used.
Global settings included in Author Stack include:
Typography
The typography controls allow you to change the default font size, color, family, line-height, letter spacing, letter case for the following elements:
- Text
- Links
- Headings
- Captions
- Buttons
Colors
The color controls allow you to change the default colors of the following elements:
- Text
- Background
- Link (normal and hover)
- Buttons (text and background)
- Headings (H1, H2, H3, H4, H5, H6 or all)
Layout
- Content Width
- Wide Content Width
- Padding (horizontal) – Used on small screens to prevent content touching the sides
- Block Spacing – The default gap between paragraphs