ThemeKit UI
Poster
Heading

Poster Text

Poster style headings and text in hero items are popular on designer quality web designs, The text normally uses a display type of font - in the bove example the Google hosted font Bowlby One SC is used .
Background
The heading background can be a solid color, two color gradient with adjustable angle of an image. The image is inserted in three sizesfor the various devices and has a an option to be lazy loaded.
Font Size & Letter Spacing
The text size and letter spacing needs to be expressed in viewport units to make it responsive. Unfortunately, at the time of writing, EverWeb cannot handle these so we have uses some CSSS trrickery to make them work.
The widget has controls for changing the font size for phone in portrait mode.
Text Stroke
Large letters can benefit from adding a teatx stroke to define them using the controlfor stroke width and color.

Text Shadow

Adding text shadow can thicken up Google hosred fonts that only have on font weight. In this application adding two or more text shadow makes the effect more unique and dramatic.
The controls available for the shadows are …

  • Check boxes to turn on shadows two and three
  • Control for shadow radius - plus or minus values
  • Shadow color control
  • Shadow spread controls
  • Controls for shadow/blur/spread
  • Switch to one text shadow on phones for better clarity

Shadow Settings

In the example the first shadow is given a negative value to move it up and to the left.
The second shdow has a positive radius. The last one has a positive radius about 2x the second one.
Note that the blur/spread value should be about 2x the radius value.
Phone Portrait Mode
On these devices the font size usually needs to be increased so there are separate controls for font size stroke width and only one text shadow without a blur/spread control.

Text Primer

ThemeKit UI Text

Responsive Website Text

Text in responsive websites seems straight forward enough and 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.
Never use 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.

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.
Using a single widget to insert lots of text block with sub headings. uses way less code and contributes to a faster page download in the browser.
Using separators makes it a lot easier for the visitor to find and read the various items.

Content

The ThemeKit UI Text Plus widget uses the EverWeb widget Asset List control to add paragraphs as required.
Each item has a heading, text and an optional CTA (call to action) style link. Links can be switched globally from internal to external.
The paragraphs can be separated using a styled HTML5 <hr> element which has controls for percentage with, height, color and style - dashed, dotted, double and solid

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.
If an underline is used it's probably better to make it wavy although this could look like spelling or grammatical errors in a word processing document.
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 font color, background and padding improve it a lot.

Using The Mark
A mark can be used to highlight a text item which corresponds to a linkt below the text. The clue would be the same font color and background color for both items.

More Info

Block Quotes

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

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

Roddy McKay

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 to compensate.

Spans

Widgets created by EverWeb Widgets usually have controls for styling spans which can be used for subheadings or to change the font size and.or color of a word or phrase.
Spans are interred using HTML like this …
<span>Span Text</span>Spans are inline elements so they can be inserted anywhere in text.