EverWeb Codebox

Text Content

Text Guidelines

When it comes down to the wire, text is the mainstay of a website and the focus should be on readability.

In general, the minimum size for text content is 14px and 15 to 16px is preferable.

Using a font size lower than 14px will cause overspill in some browsers. If you must use a font smaller than 14px, do it in the footer where the messed up layout will be less conspicuous.

The screenshot to the right shows some typical settings for a text box in the Text inspector...

Use a line height of 1 unless you have a very good reason not to.

7 should be considered a maximum for paragraph spacing and 3 a minimum.

Normally the Before Paragraph setting should be zero and the spacing adjusted using the After Paragraph slider.

Give text some breathing space in the box by setting an inset margin. This also has the advantage of making the vertical alignment of text boxes a lot easier since they can be dragged hard against the left edge of the content area.

To add more focus to a text box, use the Shape Options inspector to add a line around it.

Readability

The readability of text is effected by hierarchy, contrast, line height, letter spacing, line length and alignment.

Hierarchy is taken care of by using the various sizes of HTML headings. For more info see THIS page.

For good contrast, use black, or almost black text, on a slightly off white background such as #FEFEFE and an off white for text on a very dark or black background such as #CCCCCC.

Think very carefully before using colored text on a colored background!

See below for info about hex color numbers and how to get them.

For maximum readability, use a line height of 1 and do not adjust letter spacing.

Break up large chunks of text using h4 headings, separate boxes, margins and white space.

Text Alignment

In general web page text will be aligned left and occasionally center. Headings centered on the page should be center aligned in the text box.

Right align is only used for right to left languages such as Arabic and Hebrew. It is sometimes used in table layouts and in some forms of print media.

Justified text should NEVER be used on a website. Text justification is used in the print industry to create a neat appearance for long narrow columns. It create problems with readability - especially for those who suffer from dyslexia.

Color

When using code entry, hex color numbers are the easiest way to go rather than using RGB.

If you don't already have it, download and install Hex Color Picker.

This useful plugin will display the color number of any color in the main color box or, conversely, the color that relates to any hex number you enter.

The plugin is added to the ColorPickers folder in your user library.

Get to the user library by holding down the Option key while in the Finder Go menu.

If you don’t have this folder then just create it.

Click the hash sign (#) to open the hex color section in the main color window.

Please consider donating to keep this really useful plugin alive and useable in the future!

Drag all the most used colors down to the swatch boxes at the bottom of the color window

Text Inspector Settings
Shape Inspector ext box border
Hex Color Number