This article serves as a Style Guide which all articles on the LP Community Site should adhere to. If you have any recommendations on how the styling of articles and/or this guide can be further improved, please let us know!
Article Titles
The title of an article title should be simply and straight to the point. Too much information can deter readers from continuing further, so it's best to draw readers in using straightforward verbiage here.
Article titles, along with Headers (which we will elaborate on in the next section) should also follow these two rules:
π Fit within a 40-Character limit
π Capitalize the first and last words of a title, even if they are minor words like "a" or "the".Β
π Capitalize major words, which include nouns, pronouns, adjectives, verbs, and adverbs.Β This also includes the second part of hyphenated major words, like "Self-Report" instead of "Self-report".
π Capitalize words like "it", "is", "be", and their/our/my.Β You can also capitalize the first word after a colon, em dash, or end punctuation.Β
π Don't capitalize small words like "a", "an", "the", "but", "as", "if", "and", "or", "nor", or prepositions, unless they are the first word in the title.
Headers - How & When to Use Each
Headers are an excellent way to split up information into more digestible content for readers. As an example, the above text ("Headers - How & When to Use Them") is an "H2" Header.
H2 headers should be used when creating a large chunk of information that the article reader can anchor to. Each article should aim to have at least two H2 headers to break up their information.
Check out the right-side of this article; you'll see a portion labelled "On This Page". H2 Headers are automatically added to this list, each of which act as an anchor for the article page. Try selecting on the "Click Me!" text within this list now to see this anchor functionality in action.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum pretium libero, vitae commodo arcu venenatis sit amet. Vivamus gravida iaculis ex in feugiat. Sed neque leo, venenatis eget nulla id, blandit facilisis neque. Duis vel ante porta, faucibus tortor nec, sodales ligula. Curabitur orci libero, rhoncus nec nibh et, tempus sollicitudin enim. Vestibulum ornare ex ut mauris convallis pellentesque. Nullam cursus sapien a lacus pulvinar elementum. Ut sed ante lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum pretium libero, vitae commodo arcu venenatis sit amet. Vivamus gravida iaculis ex in feugiat. Sed neque leo, venenatis eget nulla id, blandit facilisis neque. Duis vel ante porta, faucibus tortor nec, sodales ligula. Curabitur orci libero, rhoncus nec nibh et, tempus sollicitudin enim. Vestibulum ornare ex ut mauris convallis pellentesque. Nullam cursus sapien a lacus pulvinar elementum. Ut sed ante lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum pretium libero, vitae commodo arcu venenatis sit amet. Vivamus gravida iaculis ex in feugiat. Sed neque leo, venenatis eget nulla id, blandit facilisis neque. Duis vel ante porta, faucibus tortor nec, sodales ligula. Curabitur orci libero, rhoncus nec nibh et, tempus sollicitudin enim. Vestibulum ornare ex ut mauris convallis pellentesque. Nullam cursus sapien a lacus pulvinar elementum. Ut sed ante lectus.
Click Me!
Great! Now you can see how H2 headers can help users navigate through an article with ease.
Headers - Continued
Now that we know the power of H2 Headers, let's explore our other Header options.
H3 Headers
H3 Headers don't provide the same anchor functionality as H2 Headers do, but they're a great way to split up information into even smaller chunks. H3 Headers should only really be used if you plan on using "Sub-Portions" of information within a larger "Portion" (denoted by using an H2 Header). So, if you can't really split up the content accompanied by your H2 Header, H3 Headers aren't necessary.
H4 Headers
H4 Headers are a great way to showcase notes or examples of their preceding content. You can use these within an H3 Header's content or within an H2 Header's content if you don't have any "Sub-Portions." H4 Headers will often be accompanying by a colon, denoting its use. ("Example(s):" or "Note:")
H5 Headers
Out of the gate, you can see that H5 Headers are even smaller than plain text within an article. H5 Headers should not be used in the same method as the other headers, for this exact reason. The reader's eye will have a hard time denoting the breaking up of information, so H5 Headers are not recommended. They can potentially be used to encapsulate a single-line note or tip, but in this case you should stick to simply Boldening the marker of this information.
Example:
π«
Note: Here is a note using an H5 Header.
β
Β
Note: Here is a similar note, by simply using plain text with a Bold beginning.
In addition, see how the "Example:" text was used above? That's a good showcase of using the H4 Header!
Text Styling & Formatting
When writing your articles, you will often see some stylized choices to emphasize specific words or phrases.
Styling Options
Here are the stylings, accompanied by their respective hotkeys to apply them to highlighted text:
π Bold - Ctrl+B, Cmd+B
π Italic - Ctrl+I, Cmd+I
π Strikethrough - Ctrl+Shift+X, Cmd+Shift+X
π Inline Code - Ctrl+E, Cmd+E
π Link - Ctrl+Shift+X, Cmd+Shift+X
You can alternatively select the accompanying options from the pop-up menu when highlighting over text:
When to Style
Each of these stylings have fairly straightforward use cases, but if you're ever unsure of when to use which, follow this simple guide.
π Bold - Often showcases a keyword that the reader should pay attention to, or that is referenced throughout the article.
Example: "You can navigate back to the Home screen by selecting the logo in the top-left corner."
π Italic - Showcases a keyword so the reader inflects it while they are reading a sentence, denoting important to the specific word.
Example: "You can write something is very important, but if you write something is very important, you know how to read this in your head. Even further, if something is very very very important, you can mix the Bold and Italic styles."
π Strikethrough - May not be used often within articles, but can be used to showcase terms that are to be omitted or were updated.
Example: This sentence is out of date. This sentence replaces the outdated one.
π Inline Code - A way to showcase a code snippet that can be transfered into a scripting software, or showcasing user input.
Example: print("Hello world!")
π Links - Simply put, this is a hyperlinked piece of text that the reader can select to navigate to another page/site.
Example: Selecting this text will bring you to Google.com.
Formatting Text
When creating an article and breaking up information, it can be confusing as to how the final product will indent and space itself based on your initial input. As a rule of thumb, when starting a new paragraph or line, only use Enter, Return . This will ensure a decent amount of space is provided between the pieces of information and that no new empty lines of text are created in the process.
If you do want to go to the next line but don't wish to break up the content with any spacing, then use Shift-Enter, Shift-Return.
Examples:
Line 1
Line 2, broken apart from Line 1 by pressing Enter, Return
Line 3
Line 4, broken apart from Line 3 by pressing Shift-Enter, Shift-Return
Note: To create an empty line, demonstrated between Lines 2 and 3, simply press Shift-Enter, Shift-Return twice. This can be repeated any number of times to create blank space within an article, if need be, but is not recommended more than once/one empty line.
Emojis
You've already seen them showcased here within this article a bit, so you can tell how Emojis are a great way of further breaking up information and drawing attention!
Using the in-app emoji board can be a bit cumbersome to navigate, so we recommend using an online encyclopedia, where you can search for and copy emojis right to your clipboard and paste them into your articles using Ctrl-P, Cmd-P.
If you're unsure of what emojis to use, here are some good emojis to use within your articles:
1οΈβ£ 2οΈβ£Β 3οΈβ£ Numbers - A clean alternative to numbered lists.
π« Prohibited - Symbol used to denote bad examples/information.
β
Green Check Mark - Symbol used to denote good examples/information.
βοΈ Basic Check Mark - A nice alternative to use for a checklist/to-do list.
π Star - A fun alternative to bullet points.
Keep in mind to stick to using more universal symbols/emojis, as more uncommon emojis can have their meanings confused between languages and cultures.
