Lens typography: Beyond bold and italic

We all know bold. We all know italic.

Most of us can probably even use both at once. *

But how can we use other font effects within the body of our favorite modules (Text/Write and others) to emphasize and enhance our message?

Read on to discover the best how-to lenses, with tips that will help you design more appealing copy.

* If you don't have these two mastered yet, this probably isn't the lens for you. Go directly to Basic HTML class with Professor Glen.

Emphasizing text within a module

TYPOGRAPHY

(As you can see, type effects can easily be VERY overdone!)

First, as stated above, we will assume that you can hand code text in bold and italic before we begin.

These methods highlighted below, and attributed to the lensmasters whose lens they were first discovered on, should not take much mastery beyond that basic nested HTML coding knowledge.

TOP HOW-TO LENSES

WHEN YOU JUST NEED CODE FAST!

Basic HTML for Squidoo: Top 100 Lens by N376
Advanced HTML for Squidoo: Top 100 Lens by N376
HTML Tips for Color: Top 100 Lens by N376
Simple HTML tricks: Top 100 Lens by Magicality
My Favourite CSS Tricks: Top 100 Lens by thefluffanutta
Squidoo CSS - my favorite codes: Top 100 Lens by spirituality

How do I make colored text?

From the Simple HTML Tricks lens:

Orange text is awesome!
I love orange so much!

Here's the code:
Orange text is awesome!
I love orange so much!

How do I make a colored background?

This example comes from the Simple HTML Tricks lens.

How do I make a colored background behind a paragraph?

Highlight the entire paragraph with a lovely light blue background.

Highlight the entire paragraph with a nice pale orange background.

Here's the code:

Highlight the entire paragraph with a lovely light blue background.

Highlight the entire paragraph with a nice pale orange background.

This example comes from the Advanced HTML for Squidoo lens.

How do I make a colored background behind a few words?

Highlight only a few words in a sentence with a light colored background.

Here's the code:
Highlight only a few words in a sentence with a light colored background.

How do I make a paragraph drop cap?

Also on the Advanced HTML for Squidoo lens is a variety of code for producing a drop cap at the beginning of a paragraph.

This is my favorite variation, with a few personal tweaks:

Nam et ligula eget erat luctus iaculis. Vivamus non mi at tellus molestie tempor. Proin tincidunt ullamcorper nisi. Etiam tempor mi quis erat. Suspendisse porta egestas metus. Integer aliquam convallis felis. Integer mattis, eros vitae aliquet blandit, ante diam vehicula lectus, dapibus semper lacus libero non ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum, urna at commodo bibendum, quam eros commodo felis, ac eleifend lectus tortor luctus nibh.

Here's the code:
<b style="font-size: 100px; float: left; background: #ffcc80; color: white; line-height: 70px; padding-top: 2px; font-family: Times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: inset; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">Nam et ligula eget ...

How do I know which colors to use?

These color codes will create variations of orange and blue that will look great with the official Squidoo colors.

#276596 #c9d9e5
#13324b #93b2cb

#ff9900 #ffe6c0
#7f4c00 #ffcc80

How do I add a symbol?

Some of my favorite typographic tools in page layout are the bullet and the em dash ... but how do I use them on Squidoo lenses?

What you need to find is the HTML numeric code for the appropriate symbol. Fortunately, several lensmasters have found these for you and compiled their research. Here are my most often used:

•
(bullet)
code: •

—
(em dash)
code: —

©
(copyright)
code: ©

¢
(cent sign)
code: ¢

These and many more can be found at this lens by sonia-simone, and you can get math symbols here from N376.

How do I increase the size of a few words?

Sometimes you want some text a little larger than the rest.

You could make it this big for impact.

Here's the code:
You could make it this big for impact.

Or you can make the whole paragraph larger, like this.

Here's the code:
Or you can make the whole paragraph larger, like this.

Play around with the pixel size until you get the results you want.

How do I change the paragraph font?

Change can be good.

Variety is the spice of life.

But, use heavy fonts sparingly!

Here's the code:
Change can be good.
Variety is the spice of life.
But, use heavy fonts sparingly!

Be sure to only use the most common fonts or your readers may get very undesirable results.

XP's How to Squid

How-to blog for Squidoo, by XP the Squid Princess.

Fetching RSS feed... please stand by

How do I put in a dividing line?

You may have discovered that the simple HTML code for a horizontal rule (<hr>) does not work within these modules.

To separate paragraphs within a module, you may want to try a customizable dividing line such as this one:

There are a lot of variables that you can change to get the look and feel you want.

Here's the code:

More lines and their accompanying code to follow.

How do I put a border around a paragraph?

Another trick I LOVE is the call-out box.

The code for these boxes, or at least the code that I started with before making my own modifications, is at the Advanced HTML lens.

This is a very neat way to place emphasis on important information in your lens. You can change the type of border, the background color of the box, and many other options by learning just a little bit of code!