Legibility Guidelines
Rule 4-D -- Post legibility
Signatures, post backgrounds and about me's should all be legible to the reader. This means that they should be able to be read and shouldn't cause any trouble to the reader.
For some people this will be a little subject to interpretation, as what is fine for some, may not be for others - the best thing to do is to report it to the staff so that they can deal with it, if there is an issue there.
Sadly, if it only seems to be affecting a single person, or a small amount of individuals, we cannot expect everyone to cater to those singular persons.
The following post is an in-depth guide about our rules on templates and basic legibility. It aims to establish what is and isn't acceptable in your Templates or on your Profiles.
Color Usage & Why It's Important
Firstly, let's talk about
colours. It goes without saying, but please don't use colours that are eye-bleeding! For instance, this means
do not use a bright luminescent pink background with neon green text or something to that effect. Generally, you should have bright text on a dark background, or dark text on a light background. Not dark-on-dark or light-on-light.
• You can check if your background and text colours contrast acceptably
here.
• If you're looking for colors that complement each other well, try
this site.
The first link, WebAIM, gives you a rating based on your chosen colors.
Anything that rates a 4.5:1 or over is fine, but 7:1 is ideal.
Now that we've covered how to pick colors that properly complement each other, let's move on to how to use them.
If you don't define a color for your template, the text will be the same color as the skin the user is using. Not everyone uses the same skin as you, so their text or background colours may be different if you don't define them both.
For example, if I use a template with dark backgrounds, and my skin has light text, it will appear to be fine. But if you had a skin with dark text, it wouldn't work at all. You need to be aware of this and be sure to always define both background
and text colours in your template.
This applies the other way around too: if you use a text colour but don't define a background, it may not show up for other people.
To recap:
1] No [color], no [background] = OK!
2] [color], but no [background] = Problem
3] No [color], but [background] = Problem
4] [color] and [background] = Probably ok, if you chose appropriate colours!
Adjusting Link Colors
Something that a lot of people overlook but is vitally important, is link color. Many templates don't define link colors, and this is a major issue: remember that not everyone has the same skin as you do, so they may not be able to see your links.
To change link color, simply put this bit of code somewhere in your template:
[style]
a:link, a:visited {
color: #COLOR;
}
[/style]
This sets the colour of all links in your post. This will ensure that people can read your links on your template or about me. This code saves you time rather than having to constantly use
[color] tags inside all of your links.
Text & Font size
The final point about legibility to make, is your font size and your font choice. Be aware that a font will only appear if the user happens to have it installed on their machine. Make sure you stick with common fonts to ensure they will be seen. This also applies to fonts used in an artistic template.
In addition, text size is very important. The default text size is 12pt, which is the "standard" font size for good legibility. Anything less than size 10pt might be difficult to read, and anything over the size of 15pt bloats template size, leading to difficulty reading on smaller devices. Header tags (such as
[h1] and
[h2]) are okay because they're not actively being used in the body of a post, and are meant to stand out.
Note that pt and px are NOT the same thing. Px measures pixels only, while pt refers to the physical height of text. Text set to 10px will be much smaller than text set to 10pt.
For this reason, the minimum text size allowed on site is 10pt and the maximum is 15pt.
Here is an example of differing sizes:
text at the size of 6
text at the size of 8
text at the size of 10
text at the size of 12
text at the size of 14
Overall template size
Next, let's talk about height restrictions. Templates must be
between 300px and 600px in width, and
400px in height.
The height here is the "base" height. In other words, the height your template has if there is no content text inside of it.
Be careful when defining width: mobile users may not have the full 600px width visible to them, so your post may get cut off if you make it too wide. Here is a visual demonstration:
I am a wide template on a narrow screen. This text is going to be cut off by the edge of the screen before it reaches the end of the template, resulting in unreadable text and a big problem for mobile players.
There are a lot of mobile players, so don't assume it'll be fine!
Generally, you should just avoid setting a
width, and let the browser handle it.
Other restrictions & guidelines
Now for a bit more detail about other template codes that are often misused, specifically what
is allowed, and what's
not allowed.
Please keep in mind that if you're ever unsure, you're more than welcome to ask in the Help forums to check before doing.
1]: Scroll bars & "overflow"
Generally speaking, you should never use the "overflow" code. This code puts scrollbars in your post. At best, it's a hassle to scroll them. At worst, part of your post becomes hidden and unreadable. This is especially an issue for mobile users, as touchscreens are not capable of handling scrolling inside the main page.
If it's used to display a code, as shown in the post below, then it is acceptable.
Other codes may be added in future. Due to the wide variety of options, we can't cover all cases, so please check here occasionally. Again, feel free to ask if you are unsure.
What you can do to help
If you see any post or template and are unable to read it due to misuse of colours or other styles, please report the post from the post's menu. We will review and edit the post if necessary, and contact the author to let them know of the problem. Ultimately, our objective is to allow every voice to be heard and every post to be read!
Hi my name is Sei my favorite color is clear