All the X’s
This post explains all the different “x” characters currently available in HTML. It covers the various HTML entities and provides some examples and tips. Also explains the difference between the often confused “Multiplication X” and “Multiplication Sign”, and which is better for symmetrical buttons and links.
Contents
- The Letter X
- Multiplication X
- Heavy Multiplication X
- Multiplication Sign
- Ballot X
- Heavy Ballot X
- Mathematical Double-Struck Small X
- Mathematical Double-Struck Capital X
The Letter X
First is the common letter “x”. It’s used in the English language, looks like this:
x
No HTML entity required for the letter x. You can write/display it as lowercase “x” or uppercase “X”. Depending on the font, the letter “x” may be symmetrical, but usually in general it’s not. So not very good for things like “x” (close) buttons.
Multiplication X
Used for maths. Nice and symmetrical “x” symbol. Works great for “x” (close) buttons. The character looks like this:
✕
The HTML entity is either of the following:
✕✕Note that ✕ is preferred when going for a lighter/thinner character display.
Heavy Multiplication X
Same as the previous, but heavier set character weight. Used for maths. Also good for “x” (close) buttons. It looks like this:
✖
The HTML entity is either of the following:
✖✖Note that ✖ is preferred when going for a heavier/thicker character display.
Multiplication Sign
The Multiplication Sign is very similar to the previous “Multiplication X” and “Heavy Multiplication X”. But there are some obvious differences. For example, Multiplication Sign is not as tall/wide as Multiplication X. The size difference affects line-height and character display relative to other on-screen elements. Multiplication Sign looks like this:
×
Here is a side-by-side comparison using the same font-size (Multiplication Sign on the left, Multiplication X and Heavy Multiplication X on the right):
× ✕ ✖
Here are the HTML entities for the Multiplication Sign:
××××Note: Multiplication X (or Heavy Multiplication X) is better for buttons where the “x” needs centered both vertically and horizontally (like in a small circle button), as its line-height is more center/middle than the Multiplication Sign or Ballot X.
Ballot X
The ballot “x” is meant to look like someone marked an “x” on a ballot or something. Probably a throwback to days when voting was real on actual paper ballots.
✗
The HTML entity is either of the following:
✗✗✗Heavy Ballot X
Same as regular ballot “x”, only heavier display for when you really mean it. Like hey, I really voted. This heavy “x” character looks like this:
✘
The HTML entity is either of the following:
✘✘Mathematical Double-Struck Small X
This is the “small” (lowercase) version of the new Twitter logo/icon:
𝕩
The HTML entity is either of the following:
𝕩𝕩𝕩Mathematical Double-Struck Capital X
And here is the “capital” (uppercase) version of the new Twitter logo/icon:
𝕏
𝕏𝕏𝕏You can find more details about these and other HTML entities at reference sites such as this one.
