scattering clouds

Useful characters & typefaces for website building.

This is a little collection of HTML / Unicode characters and font / typefaces that I find to be quite useful for design and utility purposes.

Useful characters and styles.

Most of the things here can be replicated across different editing software, including word or text editors and HTML editors.

All you need to do is to copy and paste the reserved HTML entities OR the character(s) provided between the inverted angle brackets >⁠<.

&copy; OR >©<

&trade; OR >™<

&reg; OR >®<

Open and closing curly quotation marks.

&#8216; OR >‘<

&#8217; OR >’<

&#8220; OR >“<

&#8221; OR >”<

> ‘ ’ “ ” <

Good for single and double quotation marks, as well as apostrophes.

Text editors and browsers often mix up left and right quotation marks and end up displaying them incorrectly. So it is sometimes better to type these characters down explicitly so there will be no confusion.

Straight or neutral quotation marks.

&apos; OR >'<

&quot; OR >"<

Side note: If you are editing text within WordPress’ very own Gutenberg editor, WordPress will automatically convert ALL "straight" quotes to “smart” (i.e. curly) quotes before they are displayed on the frontend of your website.

If you really need to display straight quotes in a WordPress blog post, you would need to use a custom code snippet to disable this behaviour.

Non-breaking space (NBSP).

&nbsp; OR > < OR >          <

This character can be placed between two or more words to ensure they will stick together and move into the next line together (if need be), instead of becoming broken apart and distributed across two lines of text.

You can also use multiple NBSP characters to “force” additional spacing between text, because it won't be reduced down into a single whitespace.

Where would you use NBSPs?

In my case, my next blog post has an awkward title length as shown in the screenshot below, with a single trailing word pushed into the second line:

Screenshot of a blog post title with an awkward length, which creates a rather imbalanced-looking line break.
The title looks rather top heavy with a trailing word in the second line.

By adding a NBSP character between “Google” and “Drive”, we tell the browser not to separate the two words with a line break, thus forcing the browser to move both words together into the second line:

The title looks much better with the right line break.

Non-breaking hyphen.

&#8209; OR >‑<

This character works in a similar way to NBSP, which tells the browser not to separate two words into different lines when connected by a non-breaking hyphen.

Zero-width space.

&ZeroWidthSpace; OR >​<

The main purpose of the zero-width space is to indicate potential line breaks in extremely long words without the use of hyphenation.

The zero-width space belongs to a set of characters that will not be rendered or displayed by the browser, also known as a non-printing character.

The best way to copy the non-printing character above is to highlight and copy the angle brackets surrounding it as well. Then you can paste it back down and delete the angle brackets by hand, leaving you with the desired character. You can verify the existence of non-printing characters in your editor using the arrow keys on your keyboard. It takes two taps to move your cursor past a non-printing character.

You could also use non-printing characters to bypass rules that checks for and rejects empty inputs and/or blank whitespaces.

Zero-width joiner.

&#8288; OR >⁠<

The zero-width joiner is also a non-printing character.

Similar to a non-breaking space, the zero-width joiner is also used to prohibit automatic line breaks where it is placed. Therefore, it is also referred to as a non-breaking joiner. The main difference here is that the joiner is represented by no visible character, not even an empty space.

The zero-width joiner is also useful for breaking up text to prevent the auto-replacement of emojis with certain editors, such as inserting it between the two characters “:⁠D” to prevent them from being replaced automatically by the open-mouthed smiling emoji 😀.

Em dash character.

&#8212; OR >—<

One of the longer dash characters, which is useful to help draw a reader's eye stylistically — like so —.

Tab character.

&#9; OR > < OR > < inside a HTML <span> with the CSS style “white-space:pre;”.

The tab character is treated as a regular whitespace by web browsers, so some fiddling is required to get it to behave similarly like in WYSIWYG text editors.


<s>strikethrough</s> in HTML tags OR >A line through text.<

Strikethroughs are useful for indicting indicating that an edit had been made. This might not be supported by certain editors.


<sup>superscript</sup> in HTML tags OR >superscript< OR >supersuperscript<

Superscripts are useful for writing mathematical terms like 22 = 4. This might not be supported by certain editors.


<sub>subscript</sub> in HTML tags OR >subscript< OR >subsubscript<

Subscripts are useful for writing scientific notations like H2O. This might not be supported by certain editors.

Useful fonts / typefaces.

These fonts are free for commercial use and have some interesting use cases. Take a look at this blog post if you need guidance on how to use Google Fonts.

Free Google Font - Flow.

Flow is a font family built for abstracting content and code for design mockups, wireframing, presentations, and websites. It's not perfect, but neither are your wireframes. Flow has sub-pixels, artifacts, overlaps and other imperfections.

Flow comes in three styles: Circular, Rounded and Block.

Designed by Dan Ross

Flow Block:Flow is a typeface built for wireframing. It's free and it comes in three weights – circular, rounded, and block.

Flow Circular: It's not perfect, but neither are your wireframes. Flow has sub-pixels, artifacts, overlaps, and other imperfections.

Flow Rounded:Designing with real content is important, but sometimes we need something more abstract. Flow aims to provide an efficient and flexible way to create abstracted content.

Apart from using Flow for mockups and wireframes, it is also possible to use it to simulate dividers or horizontal rules visually without using code.

Free Google Font - Noto Emoji.

This allows us to style emojis as simplified, text-based icons with font colors. It gives us much better design consistency, which is crucial for branding purposes.

Regular emojis: 😀🤣😅🔎✉📞🌐🛒✅❎⬆⬇⬅➡

Noto emojis: 😀🤣😅🔎✉📞🌐🛒✅❎⬆⬇⬅➡

Regular emojis as colored links: 😀🤣😅🔎✉📞🌐🛒✅❎⬆⬇⬅➡

Noto emojis as colored links: 😀🤣😅🔎✉📞🌐🛒✅❎⬆⬇⬅➡

As you can see, emojis rendered using browser defaults lack stylistic consistency and cannot be set to the same color. Noto emojis are far superior in this regard.

Free Google Font - Zilla Slab Highlight.

This is the only commercially free typeface I could find that is highlighted by default. It could make for some interesting website / graphical designs, since it opens up more styling options without the need to mess with HTML and CSS code.

Zilla Slab Highlight regular.

  Zilla Slab Highlight regular with added non-breaking space characters.   

Zilla Slab Highlight regular with italics.

Zilla Slab Highlight bold.

Zilla Slab Highlight bold with link styling.

back to top