How to Produce Font Types Using HTML

raccoon-mascot

The Hypertext Markup Language (HTML) used to create web content, has some interesting features. One of them being that it is possible to produce beautiful font types using HTML entity codes.

HTML entity codes are to some extent very similar to Alt codes.

For example, the Alt code of the uppercase letter A is Alt+65 — meaning that if you press and hold the left Alt key on your keyboard and type 65 on your numeric keypad, the result will be the uppercase letter A.

As a HTML entity, the uppercase letter A has the following code: A.

The English alphabet can be written in HTML entity codes using the A to Z range for uppercase letters. And the a to z range for lowercase letters.

But there are also three font types that can be created without using any numeric values:

ℱ𝒾𝓇𝓈𝓉 ℱℴ𝓃𝓉 𝒯𝓎𝓅ℯ
𝔖𝔢𝔠𝔬𝔫𝔡 𝔉𝔬𝔫𝔱 𝔗𝔶𝔭𝔢
𝕋𝕙𝕚𝕣𝕕 𝔽𝕠𝕟𝕥 𝕋𝕪𝕡𝕖

To create the first font type, use the 𝒜 to 𝒵 and 𝒶 to 𝓏 HTML entity codes.

To create the second font type, use the 𝔄 to ℨ and 𝔞 to 𝔷 HTML entity codes.

To create the third font type, use the 𝔸 to ℤ and 𝕒 to 𝕫 HTML entity codes.

To simplify matters, here is a summary table for all four HTML codes for the English alphabet — first uppercase and then lowercase:

HTML Entity Codes of the English Alphabet

HTML Char HTML Char HTML Char HTML Char
 A A 𝒜 𝒜 𝔄 𝔄 𝔸 𝔸
 B B ℬ 𝔅 𝔅 𝔹 𝔹
 C C 𝒞 𝒞 ℭ ℂ
 D D 𝒟 𝒟 𝔇 𝔇 𝔻 𝔻
 E E ℰ 𝔈 𝔈 𝔼 𝔼
 F F ℱ 𝔉 𝔉 𝔽 𝔽
 G G 𝒢 𝒢 𝔊 𝔊 𝔾 𝔾
 H H ℋ ℌ ℍ
 I I ℐ ℑ 𝕀 𝕀
 J J 𝒥 𝒥 𝔍 𝔍 𝕁 𝕁
 K K 𝒦 𝒦 𝔎 𝔎 𝕂 𝕂
 L L ℒ 𝔏 𝔏 𝕃 𝕃
 M M ℳ 𝔐 𝔐 𝕄 𝕄
 N N 𝒩 𝒩 𝔑 𝔑 ℕ
 O O 𝒪 𝒪 𝔒 𝔒 𝕆 𝕆
 P P 𝒫 𝒫 𝔓 𝔓 ℙ
 Q Q 𝒬 𝒬 𝔔 𝔔 ℚ
 R R ℛ ℜ ℝ
 S S 𝒮 𝒮 𝔖 𝔖 𝕊 𝕊
 T T 𝒯 𝒯 𝔗 𝔗 𝕋 𝕋
 U U 𝒰 𝒰 𝔘 𝔘 𝕌 𝕌
 V V 𝒱 𝒱 𝔙 𝔙 𝕍 𝕍
 W W 𝒲 𝒲 𝔚 𝔚 𝕎 𝕎
 X X 𝒳 𝒳 𝔛 𝔛 𝕏 𝕏
 Y Y 𝒴 𝒴 𝔜 𝔜 𝕐 𝕐
 Z Z 𝒵 𝒵 ℨ ℤ
 a a 𝒶 𝒶 𝔞 𝔞 𝕒 𝕒
 b b 𝒷 𝒷 𝔟 𝔟 𝕓 𝕓
 c c 𝒸 𝒸 𝔠 𝔠 𝕔 𝕔
 d d 𝒹 𝒹 𝔡 𝔡 𝕕 𝕕
 e e ℯ 𝔢 𝔢 𝕖 𝕖
 f f 𝒻 𝒻 𝔣 𝔣 𝕗 𝕗
 g g ℊ 𝔤 𝔤 𝕘 𝕘
 h h 𝒽 𝒽 𝔥 𝔥 𝕙 𝕙
 i i 𝒾 𝒾 𝔦 𝔦 𝕚 𝕚
 j j 𝒿 𝒿 𝔧 𝔧 𝕛 𝕛
 k k 𝓀 𝓀 𝔨 𝔨 𝕜 𝕜
 l l 𝓁 𝓁 𝔩 𝔩 𝕝 𝕝
 m m 𝓂 𝓂 𝔪 𝔪 𝕞 𝕞
 n n 𝓃 𝓃 𝔫 𝔫 𝕟 𝕟
 o o ℴ 𝔬 𝔬 𝕠 𝕠
 p p 𝓅 𝓅 𝔭 𝔭 𝕡 𝕡
 q q 𝓆 𝓆 𝔮 𝔮 𝕢 𝕢
 r r 𝓇 𝓇 𝔯 𝔯 𝕣 𝕣
 s s 𝓈 𝓈 𝔰 𝔰 𝕤 𝕤
 t t 𝓉 𝓉 𝔱 𝔱 𝕥 𝕥
 u u 𝓊 𝓊 𝔲 𝔲 𝕦 𝕦
 v v 𝓋 𝓋 𝔳 𝔳 𝕧 𝕧
 w w 𝓌 𝓌 𝔴 𝔴 𝕨 𝕨
 x x 𝓍 𝓍 𝔵 𝔵 𝕩 𝕩
 y y 𝓎 𝓎 𝔶 𝔶 𝕪 𝕪
 z z 𝓏 𝓏 𝔷 𝔷 𝕫 𝕫

Important Note

In my tests, only Mozilla Firefox and Internet Explorer show all of the above characters correctly. Google Chrome, Opera and Safari show only some of the characters correctly.
 
But only Mozilla Firefox has the full capabilities to display even the most complex HTML entities (e.g. math). One more reason why I keep saying that Mozilla Firefox is by far the best browser out there.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *