View source for Blog:Stop using "fancy fonts"

[[File:Fancyfontno.png|thumb|right|alt=A yells at the reader. Beside him is highly stylized text reading "fancy font" which has been crossed out.|Don't use them!]]
I tend to hark on about accessibility a fair bit, and one of the things I always hate to see is the usage of "fancy fonts"—substitutions of regular text with characters that <em>look like</em> regular text, but in a different style. It drives me a bit bonkers seeing it in the wild, especially en masse, even though I'm sure that the person who is using it is unaware that they're not actually fonts. This blog will be my dump of complaining about these things, mainly to get the word out about why these shouldn't be used at all.

To summarize this article: "Fancy fonts" use Unicode characters that are visually similar to their Latin replacements, but are really often not letters at all. Such substitutions confuse anything which needs to rely on the exact data of its characters like screen readers and search results. Also, they take up more memory than regular Latin text and I believe can also have issues with dyslexia and fonts. Either go without the decoration or find a proper way to actually add fonts.

== You're actually typing math ==
Take this inconspicuous example: I want to make a string of text italicized, but, the website I'm using doesn't give me a way to do that. Rather than assume I just won't be able to do it, I look online for ways to achieve this anyways, and—either through a Google result, YouTube video, or ad advertising a keyboard—stumble upon a tool that lets me do exactly what I want. Great! A solution to my problems, and the website will let me do it! Better yet, it even seems to work everywhere!

{| class="wikitable"
! Regular text
| Lorem ipsum dolor sit amet.
|-
! "Italicized" text
| 𝘓𝘰𝘳𝘦𝘮 𝘪𝘱𝘴𝘶𝘮 𝘥𝘰𝘭𝘰𝘳 𝘴𝘪𝘵 𝘢𝘮𝘦𝘵.
|}

If I'm unaware of what is really going on, or am satisfied with the result, I'll take it at face value and assume what I just typed or pasted really is italicized text. Though, if you have anything of a keen eye, you'll notice the text doesn't seem to match the style of the regular text. To make this fact more obvious, I'll compare it alongside actual italicized text, then also try it in other typefaces as well.

{| class="wikitable"
! !! Verdana !! <span style="font-family: Arial, sans-serif !important;">Arial</span> !! <span style="font-family: Times New Roman, serif !important;">Times New Roman</span>
|-
! Regular text
| Lorem ipsum dolor sit amet. || <span style="font-family: Arial, sans-serif !important;">Lorem ipsum dolor sit amet.</span> || <span style="font-family: Times New Roman, serif !important;">Lorem ipsum dolor sit amet.</span>
|-
! Italicized text
| ''Lorem ipsum dolor sit amet.'' || <i style="font-family: Arial, sans-serif !important;">Lorem ipsum dolor sit amet.</i> || <i style="font-family: Times New Roman, serif !important;">Lorem ipsum dolor sit amet.</i>
|-
! "Fancy font" text
| 𝘓𝘰𝘳𝘦𝘮 𝘪𝘱𝘴𝘶𝘮 𝘥𝘰𝘭𝘰𝘳 𝘴𝘪𝘵 𝘢𝘮𝘦𝘵. || <span style="font-family: Arial, sans-serif !important;">𝘓𝘰𝘳𝘦𝘮 𝘪𝘱𝘴𝘶𝘮 𝘥𝘰𝘭𝘰𝘳 𝘴𝘪𝘵 𝘢𝘮𝘦𝘵.</span> || <span style="font-family: Times New Roman, serif !important;">𝘓𝘰𝘳𝘦𝘮 𝘪𝘱𝘴𝘶𝘮 𝘥𝘰𝘭𝘰𝘳 𝘴𝘪𝘵 𝘢𝘮𝘦𝘵.</span>
|}

Are you starting to see the difference? The "fancy font" looks the exact same across all typefaces, and doesn't match the style of any of them! How come?

The characters you're seeing in the "fancy font" are known as {{w|Mathematical Alphanumeric Symbols}}, which to put in simple terms, means that you're looking at a bunch of math letters. These characters are expressedly <strong>not</strong> presentational, as they're specifically designed to be distinct from one another (that is, a character like "𝘢" is completely different from Latin "a"). This is made even more clear by the fact that Unicode does not even include regular serif letters in the set, as the typeface where these will be used should already be serif.

== Those aren't even letters! ==
Side tangent, but this also applies to other forms of "fancy font" as well.

{| class="wikitable"
! "Upside down"
| ˙ʇǝɯɐ ʇıs ɹolop ɯnsdı ɯǝɹo˥
|-
! Whatever this is
| ᄂӨЯΣM IPƧЦM DӨᄂӨЯ ƧIƬ ΛMΣƬ.
|}

At least a good portion of the characters in the first example come from the {{w|International Phonetic Alphabet}}. And, just for kicks, here's the name of every character in that last one:

<div style="columns: 4;">
* HANGUL CHOSEONG NIEUN
* CYRILLIC CAPITAL LETTER BARRED O
* CYRILLIC CAPITAL LETTER YA
* GREEK CAPITAL LETTER SIGMA
* LATIN CAPITAL LETTER M
* SPACE
* LATIN CAPITAL LETTER I
* LATIN CAPITAL LETTER P
* LATIN CAPITAL LETTER TONE TWO
* CYRILLIC CAPITAL LETTER TSE
* LATIN CAPITAL LETTER M
* SPACE
* LATIN CAPITAL LETTER D
* CYRILLIC CAPITAL LETTER BARRED O
* HANGUL CHOSEONG NIEUN
* CYRILLIC CAPITAL LETTER BARRED O
* CYRILLIC CAPITAL LETTER YA
* SPACE
* LATIN CAPITAL LETTER TONE TWO
* LATIN CAPITAL LETTER I
* LATIN CAPITAL LETTER T WITH HOOK
* SPACE
* GREEK CAPITAL LETTER LAMDA
* LATIN CAPITAL LETTER M
* GREEK CAPITAL LETTER SIGMA
* LATIN CAPITAL LETTER T WITH HOOK
* FULL STOP
</div>

== Okay, so what's the issue? ==
The biggest problem is that this form of text is inaccessible in <em>so</em> many ways, both to actual people and programs. For people, this sort of text can be hard or outright impossible to read, for example if one is using assistive technology like a screen reader or Braille output. It's no good for programs either, as there's no good way to interpret the context in which Unicode symbols are being used. Actually, [https://superuser.com/questions/1160295/why-shouldn-t-i-use-unicode-characters-to-simulate-typographic-styles-such-as-s this Stack Overflow page] has extremely good answers to why one shouldn't use these, and the accepted answer has two really good quotes:

<blockquote>
<p>As a '''first example''', consider what you would want a reasonable search to do with the character 𝒲 (mathematical script ''W''). Assume that the search has two modes, the ''default mode'' and the ''exact mode'' (usually called ''case-sensitive''). This character should be:</p>
* found when searching for ''w'' or ''W'' in default mode – for those who do not want to bother entering or copy-pasting the special character into the search field;
* found when searching for 𝒲 in exact mode – for those who want to search where the corresponding variable is mentioned in a mathematical document³;
* not found when searching for 𝓌, ''w'' or ''W'' in exact mode on account of breaking a search similar to the above.
<p>However if you use this character to simulate regular text, it should be found when searching for ''W'' or 𝒲 in exact mode, which is in conflict with the above.</p>
<p>As a '''second example''' consider that Cyrillic characters should never be found when searching Latin characters and vice versa, as they completely different things. However if use Cyrillic characters to simulate Latin small caps, you need this to happen, if you do not want searchability to be broken. This would lead to people find a lot of useless stuff if they search for a rare Latin-alphabet word that just so happens to correspond the faux small caps of some popular Cyrillic-alphabet word (and vice versa).</p>
<p>An exact search option cannot solve this problem, as this is reserved for other purposes in those alphabets.</p>
<p>'''In general''', it is impossible to build a search (without an insane amount of options) that is not broken by using special characters to simulate styled Latin text.</p>
{{Hatnote|— [https://superuser.com/a/1160296 Answer] by Wrzlprmft on Stack Overflow}}
</blockquote>

To further illustrate the issue, here's my Mac's built-in text-to-speech program attempting to read each of the examples:

{| class="wikitable"
! Text !! Audio !! Transcription
|-
| Lorem ipsum dolor sit amet. || [[Media:LoremIpsumRegular.wav]] || "Lorem ipsum dolor sit amet."
|-
| 𝘓𝘰𝘳𝘦𝘮 𝘪𝘱𝘴𝘶𝘮 𝘥𝘰𝘭𝘰𝘳 𝘴𝘪𝘵 𝘢𝘮𝘦𝘵. || [[Media:LoremIpsumFauxItalics.wav]] || "Dot."
|-
| ˙ʇǝɯɐ ʇıs ɹolop ɯnsdı ɯǝɹo˥ || [[Media:LoremIpsumFauxUpsideDown.wav]] || "Isolopdioh."
|-
| ᄂӨЯΣM IPƧЦM DӨᄂӨЯ ƧIƬ ΛMΣƬ. || [[Media:LoremIpsumFauxMadness.wav]] || "Mipmdim."
|}

== What should I use instead, then? ==
If you're still insistent on using such fonts, don't be? If what you're using doesn't allow you to stylize your text, then deal with the limitation and don't stylize your text, or use Unicode characters that can more easily be interpreted as decorative without gumming up the actual text content. That being said, if you're using a site that <em>does</em> allow you to stylize your text to a great degree, <big><strong>PLEASE</strong></big> use an ACTUAL font family instead of these characters! Examples of sites that allow this are Toyhouse, Art Fight, and any site which gives you an HTML/CSS or {{w|WYSIWYG}} editor that allows such a feature.

{| class="wikitable"
! Interface !! Method
|-
! WYSIWYG
| Check for a "Font" option, or anything with a font name.
|-
! HTML
| <pre><span style="font-family: Font Goes Here;">Example text</span></pre>
|-
! HTML and CSS
| <pre>
<span class="example-font">Example text</span>
</pre>
<pre>
.example-font {
    font-family: Font Goes Here;
}
</pre>
|}

Also, spread the word, please!

[[Category:Blogs]]