[HOW TO] Style Your Article Text

Use the tips below to create a consistent experience for customers using our resources by standardizing how the typography looks from article to article.

Clean Up the Formatting

SPACES

We know that your articles are often written in another text editor before the information is plopped here into Zendesk, and everyone's text editor of choice is different. But one thing that most have in common is that when you copy and paste text from them, some of the formatting comes along for the ride. 

When it comes to things like hyperlinks or tables, it's nice that the information travels along with the copy/pasting, but other things – usually most apparent by looking at the code editor – are not so desirable.

Take a look at the code behind this text copied and pasted from a Word Doc:

In the sample above, everywhere you see

 

or

, those are spaces or hard returns. They create extra vertical space in your article and should be deleted. If, even after reading this article, you still choose to copy and paste from a text editor, take the added step of looking in the code editor ( ) for extra spaces and eliminate them.

FONT STYLES

Similar to the extra space issue above, when copy/pasting from a text editor, some of the font styling information will be pulled over. Check out the code editor view of some content copied from a Google Doc:

Extra code surrounds almost every bit of text in the example above. Long tags repetitively define the font weight and sometimes overwrite what would have been useful ways to define subheads. Unlike the extra space issue above, there isn't a really easy way to get in and clean out these extra tags, and may actually cause more human error than it would be worth.

BEST BET: START FROM SCRATCH

Probably the easiest thing to do that would save time in the long run (and avoid the hassle of the code editor) would be to pull in your text completely free of formatting. Here are a few ways to get that done.

1. Compose your article inside the Zendesk editor! Easier said than done, I know. But if it's content you're writing on the fly anyway, start right here and avoid the headaches of formatting or reformatting later.
2. Clear formatting inside your OG text editor. Right before your copy and paste, most (if not all) good text editors will let you clear the formatting first. In Google Docs, select your text then in the top menu click FORMAT > CLEAR FORMATTING. In Microsoft Word, select your text then click EDIT > CLEAR > CLEAR FORMATTING.
3. Use a middleman. Notepad on a PC or TextEdit on a Mac can be a nice layover on your way between Word and Zendesk. Just paste your text into one of those (set to Plain Text), then the formatting will be stripped.

Use Header Tags

CONSISTENCY IS KEY

Most of the articles in this help center that are worth their salt have some kind of information hierarchy. And the easiest way to show that is by creating subheads within your text. Now that the formatting has been stripped out of your text – either manually or because you composed your article here in Zendesk – let's add in some good subheads.

Instead of taking the few (and arguably inconsistent) steps of selecting text, making it larger, coloring it, then making it bold, there are some preformatted headline/subheadline styles for you to easily grab right up there in the WYSIWYG editor. 

For your main article subheads, choose the Heading 2 style from the dropdown. Leave the Heading 1 style alone – that one's saved for the article title.

For the lesser subheads that you may want to group underneath a main section, use the Heading 3 style from the dropdown.

After that, our friend Bold and Italic can go a long way. 

To really emphasize certain type, the use of color is fine, but let's stay on brand. Here are some nice PromoSuite-esque choices from the dropdown palette to use (sparingly!):

So for the TL;DR version, here's a rundown:

 

Heading 2 for major subheads

Heading 3 for sub-subheads

Heading 4 for even more granularity

Bold

Italic

Highlight color one

Highlight color two

Highlight color three

Highlight color four