Headings

Over a decade ago headings were usually required to be h1 through h6. Using HTML5 only requires h1 through h3,
[1] h1 is used for the Main heading which usually displays the website name.
[2] h2 is used for the page name which should give an indication of the page content type.
[3] h3 is used for section headings to help visitors to quickly find the content they are searching for.
HTML5 Containers
HTML5 uses semantic containers to help the search engines index the content.
The main containers are header, section, article, figure and footer.
EverWeb provides a header and footer in the responsive template but these are not much use when creating a more advanced page design using widgets.
EverWeb wraps each item in a section element so individual widgets never use the HTML5 <section> in their code.
Search engines regard each HTML5 container as a "mini page" so the first heading in the container is always an h1.

Responsive Text

When setting up a content width text block 960px should be the maximum width. Any wider than this makes it difficult fron the eye to find the begining of the next line.
Adding a border or a box shadow and surrounding the item with ample "white" space makes it easier to focus on the text. A box shadow thrown off the bottom of the container helps to " lift" the item off the canvas.
Columns
It the text needs to be wider to line up with other items on the page it is better to use columns or a sidebar.
Headings
Using an h3 section heading between blocks of text breaks up the page layout and makes the individual items easier to find.
Space
It is important to break away from those tight boxy layouts and surround items with plenty of space to let the layout "breathe".
Links
When deciding if a website is mobile compliant, Google needs to see that links have a minimum height of 28px and a width of at least 32px for fingertips or 40px to be considered suitable for thumbs.
This is why links inside text are not a good idea anymore and should be replaced by CTA (call to action) style link tabs at the end of the text.

ThemeKit Responsive Text Plus

Responsive Text

Text in responsive websites seems straight forward enough as to need no 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 devices
Where links are required to relate to text content, insert them as CTA (call to action) links below the text.

Widget

The ThemeKit RWD Text Plus 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 of 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.

More Text

Large chunks of continuous text tend to make a layout look boring and cause the visitor's eyes glaze over.
Text should always be broken up into defined containers with plenty of white space around them. Where large amounts of text are unavoidable, their overpowering effect can be reduced by using a more/less function.
The item consists of an HTML5 <article> element with a heading, two paragraphs and an open/close tab.
The second paragraph is hidden on page load and is revealed when the tab is clicked/tapped.
Spans can be inserted for individual words or for sub headings. There are controls to adjust their font size and color.
Spans are inserted like this …
<span>Span Text</span>Links
There is the option to add one or two CTA (call to action) style links which can open internal or external pages with a new window option..
The tabs can be styled with a solid background, animated hover background and a border radius or can have a border which inherits the link text color and hover color.