welian
#BlackLivesMatter
Welian’s Awesome Guide to Typography
Typography is a fancy word that basically means “making written language look nice”. Since RP Nation has an amazing system that allows users to change font face in addition to size and color, I thought it might be a good idea if I imparted a few lil nuggets of wisdom in your impressionable noggins*.
Organization
Pick up the nearest book and leaf through the first few pages. Notice how the copyright information is printed in very small text, the title of the book and chapter headers (if there are chapters) are printed in a large text, and the body copy (that is, the main content of the book) is printed in a medium sized text.
This is called typographic hierarchy and it’s very important. Good hierarchy means that the text was used in such a way that it is obvious which information is the most important and needs to be read first. This kind of organization is, in my opinion, the most important aspect of presenting your information.
RP Nation has header and subheader tags that you can insert into your posts. They are in a different font from the default post font, are larger, and the header will automatically be centered. If you don’t like the style of the default headers and subheaders, you can manually resize and decorate (bold, italicize, underline) text to get a look you like.
- Sections of content should be labeled with headers and subheaders.
- Paragraphs should be clearly separated with an extra line
- Side information such as user tags and OOC remarks are probably best put at the bottom of a post in a small text, or under a spoiler tag, or within a Side block (which you can look up how to insert in the RPN’s Official BBCode Guide).
And speaking of “when needed” – sometimes you won’t have a lot of content, or it doesn’t need to be organized quite so thoroughly. That’s fine! There’s no need to slap headers and subheaders on every little thing. Be organized, but use only as much hierarchy as you think your content requires.
Presentation
Second to organization is presentation – and is where the bulk of the attention goes in typography.
Fonts
RP Nation offers several different font choices. However, to my knowledge as of this point in time, there is no way to alter the default font for a user. That means, if I really like the way Book Antiqua looks and want all my posts to be in the font, I have to manually change the font every time I post.
The following eight font faces are offered. They are ubiquitous, and are already installed on the vast majority of PCs and other devices that users may be visiting the site with.
- Arial
- Book Antiqua
- Courier New
- Georgia
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Some additional common fonts (think the default ones you would find on Word, like Chiller and the AR series) will work if you manually write in the BBCode, but they are not included in the default list for a reason – they are not as widespread, and there is no guarantee that the other person looking at your thread will have that particular font installed on their machine, especially if they are on a mobile device or are using a different operating system from you.
Props to Dusky and Pineapple, who had this conversation in another thread and educated me.
Changing the font of your post is a good way to set your content apart from other users. Don’t go crazy, though. After two or three different fonts, your content begins to look haphazard. I would recommend using one font for your post, with a second one for headers and subheaders if you really want to – and yes, you can override the font face of the headers and subheaders if they are inside your font tag (in code view). Or, if you just highlight the entire line, including the tags that you typed in in the rich text editor (the default post box) and click the font you want, that will work too.
Size
Another way to mix things up is to change the size of your text. A lot of people use the default size (4) for their posts, some people go one size smaller (3) because they think it looks neater, more delicate, or more sophisticated, professional, what have you. Don’t use sizes 1 or 2 for body copy (main content) – it’s a little too small to read for extended periods of time, and although it might look nice, it will give fellow roleplayers eye strain!
5, 6, and 7 are ideal for headers and subheaders if you prefer to make your own instead of using the given tags, or for emphasizing single lines, or indicating that a character is talking extremely loudly. Making an entire post in a large size though, would look overwhelming or even give a juvenile impression – so when you do change your font size, do so with discretion!
Decoration
Text decoration is a catch-all term for effects like bolding, italicizing, underlining, and striking through your text. Like everything else, use with discretion. Each has its own common uses, and making an entire post bolded or italicized is a surefire way to overwhelm your audience and screw up the hierarchy. After all, if everything is made to look equally important – then no one will know where to look first!
Bold
: Bolded text is often used as makeshift headers, to highlight a new word, or in the case of roleplaying, might be used to decorate dialogue in a post. I have no idea when this became a trend, but a lot of people will bold their character’s dialogue (the quotation marks and everything inside) and make it a different color so that it stands out from the rest of the prose. Whether you choose to decorate your dialogue or not… be consistent!
Italics
: This slanted text is often used when quoting someone, to emphasize a word (usually a conjunction or an adverb), or in writing, to indicate a character’s unspoken thoughts.
Underline
: Used for hyperlinks and book titles. I like to use it for written dialogue in a post – as in, when a character writes a message to another character. That is totally just a stylistic thing that I do because I can though, and is unrelated to any typographic convention.
Strikethrough
: Used to show text that should be ignored or deleted, and is traditionally used only in the process of revision… I use it to make funny jokes, like I said something, scratched it out, and said something else. I find it hilarious. You should too.
Alignment
Text in the English language is read left to right, up to down. This is very normal and you should not break this convention unless you are a poet. In fact, let me be blunt.
- Do not right-align your body copy/main content. It looks like trash.
- Do not center-align your body copy/main content. It looks like trash.
- DO NOT SCREW AROUND WITH THE ALIGNMENT OF LARGE BODIES OF TEXT
- IT
- LOOKS
- LIKE
- TRASH
Are you trashy? No! You are not! So I am going to tell you how to get a non-trashy effect similar to right and center alignments.
- Indent: Stacking indent tags will move your text in increments away from the left margin.
- Columns: If you understand how columns work, you can use those to dictate where within your post block that the text will run. Columns don’t work all that well on small screens though.
- Center block: My favorite! Center block creates a single column in the center of your post that contains the content. This is fantastic for keeping a general body of text in the centered In a post, while still having the text remain left-aligned to its container.
- Justified alignment: To "justify" texts means to adjust the spacing between words so that not only does the text form a perfect vertical line down the margin, it forms a perfect line down the right margin too. Hopefully this is enough text to demonstrate, however you might have to shrink your browser window in order to get enough line wraps to see what Justify does.
Color
Ah, color… the final entry, and one of the most basic and prevalent options. I could go into a whole spiel about contrast, but I won’t. Instead, I’ll leave you with this.
RP Nation has a pale background. Therefore, it is in the best interests of legibility to have dark to medium colored body copy. Pale and bright colored text will be lost against the background, and nobody wants to have to highlight your post in order to read it.
However, generally speaking, the larger and bolder the text, the paler you can make it. An icy lavender is a terrible color for regular text… but it makes very pretty headers and subheaders.
Now, there's a nifty BBCode on RP Nation that allows you to change the background color of a section of your post.
The effect is a little something like this.
Notice how that's a little hard to read? That dark pink is very dominant, and very overwhelming. Now, look what happens when we adjust the text color to something paler. Keep in mind that muted colors are better, two bright colors will "vibrate" against each other and be difficult to focus on.
How do I look?
That's better. By changing the text to white, it stands out against the deeply colored background and is much easier to read.
Contrast is key when applying colors - not enough contrast makes readers strain to make out the letterforms. Too-high contrast can also result in this strain, which is why the post backgrounds are by default not pure white, and the text is not pure black.
Now, as a general rule, you don't ever want to do this for a normal post - you want things to look as conventional as possible so that your content is highly presentable and easy to read. However, using the background code to create colored blocks is an excellent way to punch up headers and create unique character sheets.
Resources
Go forth, roleplayers! And make your posts pretty!
*welian does not actually yet have her degree in design and is not responsible for any ugly choices you make
Last edited by a moderator:
