Ho, Ho, Ho: My Tips as Gifts. Santa’s here.

Here are my Holiday’s Gifts to you in the form of useful tips.

Headers

Some search engines weight texts in strong, header, and anchor tags. So instead of this:

<h1>keyword 1</h1>

try this:

<h1><strong>keyword 1</strong></h1>

or this:

<h1><a …><strong>keyword 1</strong</a></h1>

CSS-style them to your heart needs. Try with several keywords and headers (h1, h2, h3, etc).

Element Size Rendering

On most browsers, medium size text is 16 pixels which is rendered as 1em when body is 100%.

Thus, for any body font-size %, X px*(1em/16px)*(body %) = Y em.
When body font-size is set to 100%, converting px into ems reduces to dividing by 16. If no nested em units are used, then

20px*(1em/16px) = 1.25em, rendered as 20px
19px*(1em/16px) = 1.1875em, rendered as 19px
18px*(1em/16px) = 1.125em, rendered as 18px
17px*(1em/16px) = 1.0556em, rendered as 17px
16px*(1em/16px) = 1em, rendered as 16px
15px*(1em/16px) = 0.9375em, rendered as 15px
14px*(1em/16px) = 0.875em, rendered as 14px
13px*(1em/16px) = 0.8125em, endered as 13px
12px*(1em/16px) = 0.75em, rendered as 12px
11px*(1em/16px) = 0.6875em, rendered as 11px
8px*(1em/16px) = 0.5em, rendered as 8px
1px*(1em/16px) = 0.0625em, rendered as 1px

At this body %, the mininum size is 1px = 0.0625em. To render 1px to smaller  ems, lower body font-size %;  e.g.,  if it  is 80%

1px*(1em/16px)*0.80 = 0.05em

Nesting elements with ems can also do the trick (*Please, see note).

BTW. Watch out for nested ems as you would need to account for these; For instance,  for body 100% all these are rendered same size:

<pre><p style=”font-size:1em;”>edel</p>
<p style=”font-size:16px;”>edel</p>
<p style=”font-size:2em;”><span style=”font-size:0.5em;”>edel</span></p></pre>

Under the Counter Prescription Medication

Extra Strength Tylenol PM contains  500 mg acetaminophen (pain reliever) plus 25 mg diphenhydramine HCl (antihistamine, nighttime sleep aid).

Regular Tylenol contains 325 mg acetaminophen

Regular Benadryl Allergy contains 25 mg diphenhydramine HCl

Which one would you take and when?

PS. I modified/corrected  some lines.

* Conversely, to retain 1px exactly as 1px at the 80% level, use 1px*(1em/16 px)/0.80 = 0.07812em.

* Some authors like to set body to 62.5% and then simply divide by 10 all pixels to get ems which is easier to remember. Your choice. I prefer the 100% mark across all  browsers.

*Pre tag above are to insure rendering in the post and not needed in the actual HTML code. I though this was obvious.

*You can also try

<h1><strong><a …>keyword</a></strong></h1>.

The above nesting techniques can also  be tried with in-page navigation (jump links) and even with img tags. If you care about W3C conformance, validate your code before putting to use  any nesting technique.

Advertisements