Responsive Website Text

Responsive Text

Text in responsive websites seems straight forward enough as to need know explanation - but is it?
The only exception to the following would be the main heading in the header or hero.
All the text in a website should use the same font.
Fonts should be chosen for readability rather than style.
Never use bold, italic or letter spacing. These cause problems for those with reading difficulties.
Avoid using links in text. They are not user friendly for mobile device users.
Where links are required to relate to text content, insert them as CTA (call to action) links below the text.

Widget

The ThemeKit Writer Plus Text widget adds some items that are required to make text more readable and easy to follow.
Large chunks of text need to be broken up to prevent visitors being overwhelmed, important keywords need to be indicated and quotes from other sources presented in a professional manner.

Container

Blocks of standalone text should be inserted in an HTML5 <article> element - not an anonymous <div>. A quick look at the source code of a webpage will reveal a "div soup" - the mark of an outdated design or designer.
Text Width.
A text container with a single column should have a maximum width 0f 960px and less is better. When lines are much longer it becomes more difficult for the eye to move from one line to the beginning of the next.

Basic Font Style

Any word or phrase can be made <b>bold</b>, <i>italic</i> or <u>underlined</u> by enclosing in the appropriate tags.
Spans
A span tag can be used anywhere a change in style is required. In this case the <span>span</span> above this line of text is used to create a sub heading.

Mark

In place of bold or italic to draw attention to keywords use a styled mark. Underlines are best avoided since visitors will confuse them with outdated underlined text links.
This is an example of underline and a mark in text.
The default browser styling for <mark> is a nasty yellow color. Adding styles for the mark font color, background and padding improve it a lot.

Block Quote

The <blockquote> tag is used to display text from another source or author …

A web designer gives the client what they want. A good designer gives the client what they really need.

Roddy McKay

Styling includes adding the quotes using "::before" and "::after" selectors and adjusting the inset.
The signature is added using a span and a Google hosted handwriting font - in this case Moon Dance. These fonts tend to have a single weight so a 1px text shadow was added along with some letter spacing and the style set to italic.

Separator

The HTML <hr> is a line break to denote a change in topic or content type. It can be styled for percentage width, line height, color and style and vertical spacing from the content above and below.
Note that this paragraph has no separator below it since it is the last one.