Auto Font Formatting For RapidWeaver

Get Ideal text formatting with page wide control in a single stack. The Readable stack is more than just for adding quick and easy font control, it's a tool you can use to analyze your current, past, and future RapidWeaver projects and possibly improve them.
Stacks Image 1481

Typography

Typography is important for more than just creating a good design. It’s essential for presenting text in a way that maintains the focus of the reader and is encouraging to read. Whether we are deeply interested in the content or just scanning it, the font, font size, font weight, line height, line length, and color all effect how likely we are to understand or even read the content. This stack can be the tool that helps make your content Readable.

Bigger > More Content

It’s easy to just use what looks good or fits right, but there have been studies that show what works best. On average, it’s likely visitors only read about 20% of the text on any given webpage, and it’s even less if the font size is too small. We tend to use small font-sizes when we want to convey a lot of information, however it may be better to condense or even summarize that content to help readers get the point faster.
Studies show that bigger font-sizes increase user reading speeds and even effectively stimulate certain emotions. This coupled with large easily recognizable headers and paragraph styles let them quickly identify points and move on. This can be the difference between what makes your users read or leave.

The Readable stack will automatically apply an adjustable yet ideal base size to your content that scales each element proportionally.

It’s More Than Just Size

Typeface, uppercase and lowercase letter proportion, white space within individual letters, and even the purpose of your content can be factors for readability. Most of these come down to your choice in font, so we will go over what the Readable stack is able to help with.

Line-height also plays an important role in readability. If your familiar with the Golden Ratio, most agree that it can be applied to line-height when compared to font size for the best readability. The Readable stack will automatically apply an adjustable yet ideal line height to your content.

Line Height

Line-height also plays an important role in readability. If your familiar with the Golden Ratio, most agree that it can be applied to line-height when compared to font size for the best readability.

The Readable stack will automatically apply an adjustable yet ideal line height to your content.

Line Length

Line length can have a huge impact on reading rhythm. If you lines are too long it can cause users to struggle when moving from line to line. Narrow line lengths can interrupt sentences and break reading rhythm.

This stack can calculate an ideal line length for you and even optionally apply it automatically.
Line length can have a huge impact on reading rhythm. If you lines are too long it can cause users to struggle when moving from line to line. Narrow line lengths can interrupt sentences and break reading rhythm. This stack can calculate an ideal line length for you and even optionally apply it automatically.
Color contrast between the background and the text has an obvious effect on readability. But it’s not always so clear how much contrast is needed. Some colors can look fine with wide fonts and on brightly lit screens, but look poor with narrow fonts and on dimly lit screens. This stack contains a useful tool that will rate the color contrast and thus the readability of the text of your RapidWeaver projects.

Color And Font Weight

Color contrast between the background and the text has an obvious effect on readability. But it’s not always so clear how much contrast is needed. Some colors can look fine with wide fonts and on brightly lit screens, but look poor with narrow fonts and on dimly lit screens.

This stack contains a useful tool that will rate the color contrast and thus the readability of the text of your RapidWeaver projects.

Font

Probably the least shocking factor that has an affect on readability is the font. The fonts you use should provide a variety of weights so that you can make the necessary adjustments.

Webfont Helper, a free companion font stack, is included with this stack so you can choose the right font for any of your projects and adjust them accordingly.
Probably the least shocking factor that has an affect on readability is the font. The fonts you use should provide a variety of weights so that you can make the necessary adjustments. Webfont Helper, a free companion font stack, is included with this stack so you can choose the right font for any of your projects and adjust them accordingly.

Features

This stack will do most of the work automatically and provide you with easy to use settings to make any needed minor adjustments. If you need more granular control, you have that also. Prefer your own methods? Use the included features to get ideal values for your RapidWeaver project and apply them with the method that works best for you.

Global Font Size

  • Scales every element uniformly
  • Applies automatically
  • Is adjustable within an ideal range
  • Optional per element settings
  • Can be overridden with styled text

Global Text Color Settings

  • Optionally define default colors for headers, text, and links
  • Optionally identify dark backgrounds and automatically apply defined light text colors
  • Can be overridden with styled text

Global Line Height

  • Applies automatically
  • Is adjustable within an ideal range

Global Element Margins

  • Applies automatically
  • Includes optional per element settings

Paragraph Line Length

  • Provides a recommended pixel width for paragraphs in preview mode
  • Can optionally be applied automatically

Font Family

  • Optionally apply a custom font for headers
  • Optionally apply a custom font for body text
  • Includes free font stack

Mobile Scaling

  • Applies automatically
  • Is adjustable

Font Weight

  • Applies automatically
  • Includes optional per element settings

Selective Font Size Scaling

  • Create quotes and slogans by increasing any text with the <big> tag
  • Make fine print text with the <small> tag

Compatability

  • Compatible with most themes and frameworks
  • Support is provided for all themes and frameworks

Color Contrast

  • Rates the readability of text based on the text and background color in preview mode

Paragraph Formatting

  • Optionally identify paragraphs with missing tags and add them
The reader should be able to read the message of a text easily and comfortably. This depends to a not inconsiderable extent on the size of the type, the length of the lines and the leading (line-height).

—Josef Mueller–Brockmann