EverWeb Widgets

Website Text

When it comes down to the wire, text is the mainstay of a website and the focus should be on readability.
The absolute minimum size for text content is 14px. In general , use 15px for Verdana and 16px for Helvetica.
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.
Line height is important too and the value used will depend on the font family and size. Adding a little extra line height lets the text "breathe" and makes it easier to read.
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.
See below for info about hex color numbers and how to get them.
For maximum readability, use a line height of 22px and do not adjust letter spacing.
Break up large chunks of text with a single or double line break.
Avoid aligning text "center" and never justify it. Justified text causes problems for those with reading difficulties and makes it difficult to follow. The ragged right hand edge of the text block actually makes it easier for the eye to find the next line.
Line Length
With responsive pages it is important to consider the length of the lines of text. If the lines are too long, it is difficult for the eye to jump from the end of one to the begining of the next.
In general, the maximum width for a text section should be no more than 1000px. If the sections need to be wider, consider using a text wrap widgets like the one used below or, in no image is required, use auto columns.

Hex Color Numbers

Colors

For good contrast, use black, or almost black text, on a slightly off white background such as #FEFEFE and an off white - such as #CCCCCC - for text on a very dark or black background. Think very carefully before using colored text on a colored background!
Hex Colors
Hex color numbers are used when styling items that don't require a reduction in opacity. The hex number of any color can be obtained from the color window.
Select the color using the wheel, crayons or whatever, open the "Color Sliders" pane and select RGB Sliders to see the hex number in the box.
Color Names
Colors can be set using color names. These provide a good enough selection for general use but require a reference chart. The primary color names can be found in the "Apple" colors in the "Color Palettes" window.
RGB
Items can have transparency by using RGB and reducing the value for opacity. An RGB color is inserted like this in the CSS …
background-color:rgba(81,168,249,0.5)
The values are for red, green and blue and opacity. Opacity is set between zero and 1 and the lower the value the more transparent the item gets.

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;

NOTE: All the large text boxes in the responsive and grid layout widgets do not require the use of <br>. Just hit the return key.

Theme Break

The HTML5 <hr> is used as a paragraph or thematic break and is rendered by the browser as a 1px solid grey line …



The line becomes a lot more useful by giving it a class name and some styles …

<style>
hr.styled{display:block;width:50%;border-top:1px solid #FF0000;margin-top:10px;margin-bottom:10px}
</style>
… which gives us this …


The line is centered with 50% width and is styled using the border-top property. Vertical spacing is added using a top and bottom margin.

Mark

The browser renders text in the mark tag as black with a nasty yellow background and no padding. Adding some styles makes it a lot more useful and pleasing to the eye.


<style>
mark{background-color:black;color:#FFF;padding:2px 7px}
</style>

The above code can be pasted into the Head Code box in EverWeb to apply the style to any <mark> element inserted into a text box in a widget.

All Rights Reserved
© EverWeb Widgets -