Tag Archives: text

Graphical text vs. actual text

The purpose of this brief post is to quickly and simply demonstrate the difference between "textual" text and graphics as text.

graphic text example to demonstrate difference between text as graphics and actual textThe difference between graphical text and actual text is straightforward and obvious, but occasionally it can be difficult to explain to clients without the use of a visual aid. So we have collected five (5) examples, one of which will appear at random each time this web page is loaded.

The word(s) shown at right are text in a sense, but it is actually a graphic file (an image). The image at right is an example of graphical text, or text as graphics.

Actual text

The words you are now reading are comprised of actual text: Typed text… Content which can be read and indexed by Google and other search engines. (Hint, hint!)

The actual text vs. graphical text issue comes up often in the selection of WordPress themes. We almost always reject WordPress themes which require a graphic to be created and used to display the title and subtitle, choosing instead a WordPress theme which uses actual text (not graphics) for the site title and subtitle (or tagline)[1].

To summarize, we generally avoid graphical text. While graphics as text can look nice and can be quite visually appealing, it cannot be read as actual text — thus removing a potential & significant SEO boost by omitting that text and using an image in its place.

When there is a decision to use graphics as text for visual appeal, be sure to use the ALT tag wisely.


[1] Tagline

The subtitle or tagline for this Nashville SEO & Web Content blog is:

Nashville search engine optimization, ghostblogging, content creation, social media, and related website services

Resources: Graphical text vs. actual text

Colored text: Add a dash of color to your blog content

This is a simple resource any blogger can use to add a dash of color to otherwise drab text (textual content) — especially for larger text, such as titles and subtitles, where color shows up better. Adding color to your titles, subtitles, etc. is quick and simple as long as your blogware allows you to edit in HTML view or mode; most platforms (e.g., WordPress) allow this. [ I get it; take me to the list of color codes ] [ Lighter colors for backgrounds ]

Here’s how you do it! (If it makes no sense, then read on… it’s explained simply.)
HTML code example for a red H3-level title:

<H3 style=”color:#FF0000″>

In general, virtually all blogging, website, coding, and programming platforms have two modes for editing content: A visually oriented mode and a coding-oriented, text-based mode.

WordPress allows users to create and edit content (for blog posts and pages) in either Visual mode or HTML mode. Most geeks, technically proficient, and power users prefer to edit in HTML mode. Most others probably use Visual mode, which is a type of content presentation often referred to as WYSIWYG (stands for What You See Is What You Get; pronounced wizzie-wig).

In HTML, headings, or headers – HTML terminology for what most would call a title or a subtitle – are indicated by being enclosed within "H" tags; therefore, the HTML code for a normal H1 heading title looks like this:

<H1>Title goes here</H1>

The above line of HTML code produces this:

Title goes here

The HTML code for a heading tag to display text in the color of your choice (for now, red) looks like this:

<H2 style="color:#FF0000">My red title</H2>

When the H2 code snippet above is displayed on a web page, it looks like this:

My red title

Selected HTML color codes

Antique white 3: #CDC0B0
Azure 3: #C1CDCD
Bisque 3: #4A708B
Bisque 4: #8B7D6B
Burnt orange: #CD6600
Cadet blue 4: #53868B
Chocolate 4: color:#8B4513
Coral 3: color:#CD5B45
Coral 4: color:#4A708B
Cornsilk 3: color:#CDC8B1
Cornsilk 4: color:#8B8878
Cyan 4: color:#008B8B
Dark green: color:#006400
Dark olive green: color:#556B2F
Dark orange 4: color:#8B4500
Dark red: color:#8B0000
Dark salmon: color:#E9967A
Dark sea green: color:#8FBC8F
Dark sea green 4: color:#698B69
Dark slate blue: color:#483D8B
Dark slate gray: color:#2F4F4F
Dark slate gray 4: color:#528B8B
Deep sky blue 4: color:#00688B
Dodger blue 3: color:#1874CD
Firebrick: color:#B22222
Firebrick 4: color:#4A708B
Honeydew 3: color:#C1CDC1
Honeydew 4: color:#838B83
Indian red: color:#CD5C5C
Indian red 4: color:#8B3A3A
Lavender blush 3: color:#CDC1C5
Lavender blush 4: color:#4A708B
Light blue 3: color:#9AC0CD
Light blue 4: color:#68838B
Light cyan 3: color:#B4CDCD
Light cyan 4: color:#7A8B8B
Light salmon 3: color:#CD8162
Light salmon 4: color:#8B5742
Light sky blue 3: color:#8DB6CD
Sky blue 3: color:#6CA6CD
Light sky blue 4: color:#607B8B
Light steel blue 3: color:#A2B5CD
Sky blue 4: color:#4A708B
Light steel blue 4: color:#6E7B8B
Magenta 4: color:#8B008B
Maroon: color:#B03060
Medium orchid 3: color:#B452CD
Medium orchid 4: color:#7A378B
Medium purple 3: color:#8968CD
Medium purple 4: color:#5D478B
Medium sea green: color:#3CB371
Medium turquise: color:#48D1CC
Midnight blue: color:#191970
Misty rose 3: color:#CDB7B5
Misty rose 4: color:#8B7D7B
Navajo white 3: color:#CDB38B
Navajo white 4: color:#8B795E
Navy blue: color:#000080
Orange red 3: color:#CD3700
Orange red 4: color:#8B2500
Orchid 4: color:#8B4789
Pale green 3: color:#7CCD7C
Pale green 4: color:#548B54
Pale turquoise 3: color:#96CDCD
Pale turquoise 4: color:#668B8B
Pale violet red 3: color:#CD6889
Pale violet red 4: color:#8B475D
Peach puff 3: color:#CDAF95
Peach puff 4: color:#8B7765
Plum 3: color:#CD96CD
Plum 4: color:#8B668B
Purple 3: color:#7D26CD
Purple 4: color:#551A8B
Red: color:#FF0000
Red 2: color:#8B0000
Red 3: color:#CD0000
Red 4: color:#8B0000
Royal blue 3: color:#3A5FCD
Royal blue 4: color:#27408B
Salmon 3: color:#CD7054
Salmon 4: color:#8B4C39
Sea blue: color:#4A708B
Sky blue 4: color:#4A708B
Sea green: color:#2E8B57
Sea green 3: color:#43CD80
Sea green 4: color:#2E8B57
Seashell 3: color:#CDC5BF
Seashell 4: color:#8B8682
SGI light blue: color:#7D9EC0
SGI salmon: color:#C67171
SGI teal: color:#388E8E
Sienna: color:#A0522D
Sienna 2: color:#EE7942
Sienna 3: color:#CD6839
Sienna 4: color:#8B4726
Sky blue 3: color:#6CA6CD
Sky blue 4: color:#4A708B
Slate gray 2: color:#B9D3EE
Slate gray 3: color:#9FB6CD
Slate gray 4: color:#6C7B8B
Snow 3: color:#CDC9C9
Snow 4: color:#8B8989
Spring green 4: color:#008B45
Steel blue: color:#4682B4
Steel blue 3: color:#4F94CD
Steel blue 4: color:#36648B
Tan: color:#D2B48C
Thistle 2: color:#EED2EE
Thistle 3: color:#CDB5CD
Thistle 4: color:#8B7B8B
Tomato 2: color:#EE5C42
Tomato 3: color:#CD4F39
Tomato 4: color:#8B3626
Wheat 1: color:#FFE7BA
Wheat 2: color:#EED8AE
Wheat 3: color:#CDBA96
Wheat 4: color:#8B7E66

A few light colors; suitable background colors

Many of the above colors are light enough to serve well as background colors — perfect for sectioning off small sections of text, such as asides, notes, digressions, etc.; they are easily used with blockquotes. As above, many more suitable colors can be found on Somacon’s page of HTML color codes.

Antique white 1: #FAEBD7
Antique white 2: #FFEFDB
Antique white 3: #CDC0B0
Azure 1: #F0FFFF
Azure 2: #E0EEEE
Azure 3: #C1CDCD
Bisque 1: #FFE4C4
Bisque 2: #EED5B7
Bisque 3: #CDB79E
Cornsilk 1: #FFF8DC
Cornsilk 2: #EEE8CD
Cornsilk 3: #CDC8B1
Dark sea green 2: #B4EEB4
Dark sea green 3: #9BCD9B
White smoke: color:#F5F5F5
Yellow: color:#FFFF00


Curious? Additional details about headings, HTML, and CSS

Here are a few of the details which I omitted from the above explanation in order to keep things simple for everyone, to avoid getting too technical, etc.

HTML includes six (6) standard header sizes; from largest to smallest, they are H1 to H6. The next few lines are what the standard H1 to H6 headers look like on this blog:

H1 is the biggest.

This is an H2 heading.

Next is the H3 heading.

Then comes the H4 heading…

… followed by an H5 heading.
Last & least is the H6 heading.

If you are new to HTML, then the primary question at this point is probably something like this:

Where is the code with all the variables necessary for things like the font type (e.g., Arial, Franklin Gothic Book, Times New Roman, etc.), the font size (e.g., 10, 12, 14, etc.), the colors, what links look like and what happens when you click on them, the width of the website, etc.? When I use the browser’s feature to look at the original source code of a web page, I don’t see variables like BACKGROUND COLOR, FONT FACE, attributes of forms, and so much more… How do our web browsers know what colors and fonts to use?

That’s an excellent question which shall serve as the segue into CSS: the Cascading Style Sheet. For years now, the web standard has called for the separation of presentation and content.

Presentation: Appearance; just about anything having to do with the way a site or blog looks on the screen: background color, text color and size, font stack, link color, link action, width of the webpage, the attributes of the headers H1 to H6, etc.)

Content: The actual, bare-bones textual content; the words that comprise the content of a site or blog

In the old days, the content — PLUS all the hundreds or thousands of variables used to instruct the web browser how to render the content onto the screen (colors, fonts, widths, heights, etc.) was all mixed together to form an great big ugly mess of HTML code which could be very time-consuming to update. But now — with CSS — things are much better for the webmaster!

Resources: Add a dash of color to your blog content using colored text

Code snippets

To set background color for blockquote section
<blockquote style="background-color:#C6E2FF">

NOTE: Code snippets moved to separate post; see HTML code snippets for WordPress blogging

Removed content

<H1 style=”color:#6C7B8B”>

Thursday, April 19, 2012