Ho, Ho, Ho: My Tips as Gifts. Santa’s here.
Here are my Holiday’s Gifts to you in the form of useful tips.
Some search engines weight texts in strong, header, and anchor tags. So instead of 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:
<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
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.