EverWeb Widgets

Website Text

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.
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 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 20px and do not adjust letter spacing. Break up large chunks of text with a single or double line break.

hex color picker

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.
Drag all the most used colors down to the swatch boxes at the bottom of the color window.
Text Align
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.
Line Breaks & Special Characters
Most of the widgets allow text or captions to be entered. Since this text is added in an HTML paragraph, span or heading they require special consideration.
Use <br> for a line break. Use two of them to create a paragraph break like this: <br><br>
Here are some other commonly used characters …

& ampersand - &amp;
" double quote - &quot;
< back arrow - &lt;
> forward arrow - &gt;
© copyright - &copy;
@ at symbol - &#64;

© EverWeb Widgets -