Designing Roleplay Templates with Readability

Donate to stop seeing ads, and help support Forum Roleplay!

Now that you’ve read the Roleplay Post Templates 101, Roleplay Post Templates 201, and RPG Post Log tutorials — you have a lot of tools at your disposal. It’s super cool to create stuff, so one problem newbie HTML/CSS post template creators run into is design over readability. If you mess with the letter-spacing, word-spacing, text-shadow, and opacity of text… you might create something that looks really cool and uses a lot of different CSS effects you just learned.

But. The point of roleplaying isn’t creating fancy templates or using a bunch of awesome CSS effects. The point of roleplaying is writing. So — the core concern is always how readable your creations are. Whenever you create any kind of roleplaying code, whether it’s a whole forum layout or a simple post log — you need to keep readability as your top concern.

Dos

  • Use a font size 16px or larger.
  • Use high color contrast to make sure that your template, forum layout, or other design is readable. Always remember that not everyone sees color the same. Colorblind people and poorly sighted people might find your red-on-blue template impossible to read. You don’t have to be “fully blind” to have difficulty reading a tiny gray font on a gray background, after all.
  • Use bold, italics, and quote-marks to differentiate your speech from action. There are tons of debates about this and whether it’s “really” okay — but it does make it easier for a non-participant to skim your roleplaying thread and quickly figure out what’s going on. It also ensures the other roleplayers in the thread do not miss important verbal interactions.
  • Use the right tag for the right thing. Wrap each paragraph in paragraph tags, wrap your speech with a span or bold tag, use a div or section element for your table.

Don’ts

  • Don’t use an excessively “fancy” font. Script fonts, slab fonts, and other “decorative” style fonts do not belong in the body copy of your post template. Use them for headers — but keep the core content of your post highly readable by using simpler Serif or Sans Serif fonts.
  • Don’t use a font size smaller than 16px. Don’t use an absurdly huge font size.
  • Don’t center, justify, or right align text. Leave it left-aligned.
  • Don’t mess with letter-spacing, word-spacing, or line-height unless you really know what you are doing. These are the easiest properties to screw with readability. They aren’t good to use on “body copy” (e.g., the core paragraphs and text of your post). They’re a little easier to use on headings.
  • Don’t use “weird” text effects such as italics, underline, strikethrough, overline, uppercase, lowercase, etc. These text effects only serve to detract from readability when using them on the core content of your post.
  • Be very careful with text shadow. If you need text shadow to read your RPG post template — something’s probably not right with your colors.
  • Don’t use scroll-style tables with a small “window” of scrolling text. They’re necessarily harder to read.