Dev: Highlighting Text and Blocks for Emphasis and Visual Appeal

This page augments the LLIR Style Guide. Click the Model block below to see a note about a few discrepancies between the LLIR Style Guide (V3 September 2024) and the recommendations on this page.
Being consistent when formatting content of webpages helps implement the principles introduced on pages Best Practices for Web Design and Writing for WebSites. The Developer Notes try to follow all the guidelines the give and thereby provide examples of their use.

Conventions for Bold, Italics and the like
Highlighting with Colour
LLIR’s Colour Palette

Conventions for Bold, Italics and the like

Within textual content, font variations such as Bold and italics make specific words and phrases stand out. Following the conventions listed below gives consistently thorough the website, can also improve the reader’s understanding the content.

  • You can use italics for emphasis, as you would in ordinary writing.
  • Use italics for terms and phrases the reader may misunderstand, especially when common English words are used as technical terms, as in font variation. If appropriate, the surrounding text can provide a brief definition.
    Terms and phrases coined by LLIR fall into this category.
    Highlighting just the first occurrence of a technical term on each webpage is sufficient. Adding a link to the page where the term or concept is introduced and explained is even better.
  • Use bold when referring to page titles, headings, menuitems and the like, except when the reference is also a link.
    The underline blue automatically applied to link text is sufficient.
  • Apply bold to the first occurrence of product names, such as Kadence or WordPress, in a page.
  • When writing instructions:
  • Apply bold when referring to anything that user clicks or types, including menuitems, keyboard keys (for example: Ctrl and X) and buttons when the next point is not appropriate.
  • When telling the user to click a button, use the exact words on the button label. When possible, add colour to make the words look like the button, as in the Donate Now button.

A Convention in these Notes

Webpages built with the Guttenberg are composed of blocks. For example this block is a Paragraph. Many of the blocks provided by Guttenberg and Kadence have the same names as common English words, such as paragraph, section, table and list. These Developer Notes capitalize block names. For example: List and Icon List are different types of blocks that give options for formatting lists. For more about working with blocks, see Learning the Page Editor.

Author’s Comment: After pondering whether to treat the names of editor block types as a technical terms, I decided to standardize on capitalization as these words are technical terms on in the context of the Guttenberg editor. You may still see block names in italics on Developer Notes pages that are not yet updated.

Warnings
  • Never use quotation marks ” “ for anything except actual quotations (for which you can add attributions in footnotes1).
  • Underlining is reserved for links in websites and therefore not available as an option for highlighting.
  • Do not use headings as way of highlighting text. Use headings only to add structure to page content.
  • In general, avoid overriding the size and colour of headings set in LLIRs customized WordPress Theme.
  1. This is a sample footnote. By default, Guttenberg places footnotes at the bottom of the page, but you can move them to the end the logical part of the page where the reference appears. ↩︎

Using Colours to Highlight Blocks and Text

This and the next Paragraph have non-white backgrounds. To set colour for a block, select the block to open the editor’s Settings panel. Then click settings that relate to colour. The colour selector that opens is similar to the one shown below, with variations for different types of the blocks.
For example: the backgrounds for Row Layouts and Sections can be images instead of colours.

If the block’s type is Paragraph, also increase the horizonal padding (under Typography in the Settings panel) so that the first character in each line does not bleed into the edge of the block on a non-white background.

You can also add colour to characters within a Paragraph, as in white on black and blue on white.

The following is a Row Layout that contains two Sections. The Section on the left contains a Paragraph and a List on a pale yellow background. The Section on the right contains an Advanced Image and a Paragraph on a white background. The background for the Row Layout is an image from the Media Library.

To apply colour to characters within a paragraph for block:

  1. Select a range of characters and click More (down arrow) on the edit bar.
  2. Click Highlights from the dropdown menu.
  3. Select colours as described below.

The edit bar for a pargraph.

Image of the colour selector in the Guttenberg editor

The colour selector gives you three ways to select colours:

  • Recommended: Select one of the 15 colours in the LLIR palette. Do that by clicking a colour circle.
  • Use the colour picker by moving the mouse within the checkered area to dynamically scroll through colours. Click to select the current colour.
  • Enter the 6-character hexadecmial value that specifies a colour. An entry field opens while the colour picker is active. Do this to exactly match a colour for which you know the hex code.

When selecting colours for both the text and background, set the background first.
To remove colour highlighting applied to characters in a paragraph, click Clear.

The palette can become corrupted, possibly by user error or during a software update. If you do not see the same colours as shown here, the palette should be reinstated as described in rebuilding the colour palette.

Warnings
  • The dropdown menu of options under the More gives many options for formatting text. The Highlights option is specifically for colour. These notes use the word highlight with a broader definition that includes font variants such as inline code, subscript and superscript.
  • Highlight colours applied to text may not display in the editor until you close the file and open it for editing again. A quick way to check whether the highlight colour is correct is to click Save and view the page outside the editor. You can check within the editor by selecting the characters, clicking the More icon and looking carefully at the box that opens to the left of Highlights.

LLIR’s Colour Palette

The fifteen colours that make up the LLIR palette are listed in the table below. The author of these Dev Notes named the colours for easy reference. Each colour is really defined by its 6-digit hexadecimal code. For all colours, the lists of when they apply by default may not be exhaustive and the list of recommended applications are guidelines, not rules.

NameHex #Applied by default to / Recommended for
Logo Green 108210LLIR logo, menu bars, page titles, headings, in-page button background
Logo Blue 4BA6DDLLIR logo, header bar, in-page button hover background , link-text hover
Recommended for icons of second-level items in Icon Lists.
White FFFFFF Default background throughout the website, labels on menuitems and in-page buttons.
Strongest Text
Strong Test
Medium Text
Subtle Text		222222
3B3B3B
4A5568
718096		The palette inherits 4 near-greyscale colours for text from WordPress.
By default, Gutttenberg applies the Strongest Text to regular text.
Guttenberg applies the other shades to contents of table cells, table and image captions, footnotes and the like.
Subtle Blue DEEDF3 Background header and footer buttons , iabel on the menuitem of the page currently open
Recommended for highlighting backgrounds in Row Layouts, Sections, Paragraphs …
Subtle Green E6F0E6 Recommended for backgrounds in forms and Table blocks; also good for backgrounds in Row Layouts, Sections, Paragraphs …
Subtle Grey F8F8F8 Recommended for subtle backgrounds and when you need a third background colour for highlighting several areas or nested blocks.
Bright Green 0EAA3f Recommended for icons of first-level items in Icon Lists
Medium Brown DDC19B Recommended background for temporary content such as author/ reviewer/tester comments.
Website users should never see this colour.
Pale Yellow FAF2B4 Recommended when you need a contrasting background, such as a hover background of the current row in an Advanced Table.
Warning Red C50326 Default for h4, h5, h6 headings, which are generally used so that Heading such as Note and Warning stand out.
Recommended for icons in Icon Lists for list items that are is warning or “do not” messages.
Aquamarine A5FAC5 Hover colour of the labels on menuitems and hover colour of background in buttons in the header and footer.

Note: Pure Blue (#0000FF) is reserved for link-text and is deliberately not included in the palette.