PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

Single post in Legibility Guidelines

Forum Index > Core > Announcements > News Archive > Legibility Guidelines >

Sei's AvatarSei
Sei's Avatar

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!
Art: Bunnytears | Avatar: Novie | Background: Sei
  • Answers
  • Collecting
  • Hey! Listen!
Thy Life is a riddle, to bear rapture and sorrow To listen, to suffer, to entrust unto tomorrow In one fleeting moment, from the Land doth life flow Yet in one fleeting moment, for anew it doth grow In the same fleeting moment thou must live, die and know
Garth's love Hi my name is Sei my favorite color is clear
Interested in using a Pokefarm-made sprite? Click here to get permission!
© PokéFarm 2009-2020 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page