At this point, you have a working resume web page. It could go online as is. Jamie Peterson’s potential employers can easily scan the information, stopping to read what they want or need to.
But there are details you can attend to—numbers, acronyms, special characters, and punctuation—to make the layout more beautiful while making the text even easier to read.
Numbers and Acronyms
You learned earlier that there are two kinds of numbers: lining figures (which look more like capital letters) and old-style figures (which look more like lowercase text). It is good manners to use old-style figures in text so the numbers don’t YELL at the reader.
There are also two kinds of acronyms. Acronyms pronounced as a word (scuba) are set in lowercase. Acronyms pronounced as the letters (DVD) are set all caps. Acronyms can YELL, too.
If you must use lining figures or acronyms set in all caps, de-emphasize their size when possible. There are font families that include a “small caps” option. Most typographers would tell you that a “small caps” font is the best solution. Personally, I find most “small caps” fonts are too small compared to the regular font, and their miniscule size makes them stand out in text.
I personally prefer to set my acronyms 1px smaller than the text size. This keeps them from jumping out due to size (whether too small or too large). If you prefer to use a “small caps” font, that’s fine too.
You can de-emphasize lining figures the same way.
Punctuation and Special Characters
Punctuation marks and special characters require a bit of attention. The punctuation marks most often in need of your attention are quotation marks and the en and em dashes, because they occur most often. HTML cannot render true quotation marks, en and em dashes, and other special characters properly unless you insert character codes. Why? Because they are not keyboard characters; you can’t just “type them in.”
Special characters and punctuation marks can be added to your web page using character entities. There are two common forms of character entities: numeric and semantic. The numeric character entities have the reputation of working across more browsers (including old browsers), but I recommend using the semantic character entities (because they are easier to recognize and remember, and they work fine in contemporary browsers).
A true quotation mark is a curly quote, a mark that is as graceful of the other characters around it.
The default quotation mark in most software programs is the double prime (the symbol used when writing out a measurement in inches). The double prime, sometimes referred to as “dumb” quotes, is a pair of little vertical hashes that impede the horizontal flow of reading across a line of text.
To replace prime marks with true quotation marks, use the following code:
- Double left quotation marks “
- Double right quotation marks ”
- Single left quotation marks ‘
- Single right quotation marks (used as an apostrophe) ’
En Dashes and Em Dashes
The en dash is used to indicate a range. Think of the en dash as “between” or “to.” Examples of where to use an en dash include 3–5 years, 2:30 PM – 3:30 PM, and January–March.
The default en dash in most programs is the basic hyphen. To replace a hyphen with an en dash, use the following character set:
The em dash is used to indicate a break in thought. It’s used the way parentheses are used—when a comma is too weak, but a period is too strong. It is also used to indicate an unfinished sentence (like when a speaker has been interrupt —), or to create emphasis.
The em dash is usually indicated by two hyphens. To replace two hyphens with an em dash, use the following code:
Special characters are any character you cannot create with a single key stroke. Beyond punctuation marks, the special characters you will probably use often are ampersands (&), the copyright symbol (©), and the “hamburger/pancake icon” (≡).
Special characters are also used to set accented letters, such as the ç (ç) in the name Jean François in the text. Whenever possible, use the correct accented letters—even if it means a couple extra keystrokes.
There are dozens of reference charts available for the character entities you need to create special characters in HTML. One of my favorite reference charts is listed under Recommended Resources on every page of this site. If you find another reference chart you like better, feel free to use it.
When attending to details, remember…
- If you must use lining figures or acronyms in text, try making them smaller so they don’t stand out. If the smaller size makes them stand out more, return to the original size.
- Use syntax to create curly quotes, em dashes, en dashes, and other special characters.
If you want to learn more about small caps…
- Read “Small Caps” by Ilene Strizver