Text, typefaces, and fonts.
Text for the web, as in any form of communication, needs to be legible and approachable. Meaning it needs to be understandable and at the same time, the viewer/listener needs to WANT to understand it. Miss either of those and your message loses its power.
While the word ‘font’ traditionally includes all of the variable traits of the text, i.e. its shape, and whether it’s italic or bold, even size. This is due to the fact that a typeface was originally cast as individual letters in metal to be used to transfer ink onto paper in a press. Modern users of the term use it more loosely to mean the same basic outline of the letters only. This is more properly known as a ‘typeface’ or ‘font family’.
If one uses only one typeface for an entire poster/website it makes it harder for the reader to know which parts may be more important than another. Adding fonts judiciously helps them navigate and better retain the information you are presenting.
Too many fonts however, just as using too many main colors will distract the reader and limit their comprehension. Using no more than 2 main ‘display’ font families, possibly with the addition of a third for rare accents is a good rule of thumb. This is in addition to your main paragraph font as well, leaving you a max of 4 total.
Size selections should also stay consistent as well, keeping these to maybe 4-6 at most. Using the same size consistently in similar contexts primes the viewer for what to expect.
Color is also a vital part of navigating and retaining a sites contents. Using between 4-8 colors repeatedly, again always being consistent in choosing each one for a given function. Contrast should be high for all important information and paragraph text for ease of readability. However using lower contrast for sections can actually improve the overall retention of the page by causing the reader to pay closer attention. This can easily be overdone however so in general you should dial the contrast down to where you can read it comfortably, then increase the contrast another say 10%.
This lowering only to raise it again is to help combat our natural tendency to over-expect what our readers will be able to understand. i.e. “I can see/hear/understand it fine, so should they” This is only due to us having an insight that our readers/viewers do not. This last point needs to be taken very seriously, as it hampers most of us throughout our lives, not just when writing/designing.
So, now that we have that out of the way, on to the nuts and bolts of the thing.
Long form text needs to have readability as your highest concern. This is the main substance of the site, and where it’s most important to choose a good font. Luckily it’s quite easy. Use a common pre-installed, universal web font. These are fonts such as Helvetica, Verdana, and Open sans. The have all been carefully made and tested over time to be the most legible on a screen, just pick one and go. Only then go on to pick display fonts.
Display fonts don’t need to be especially legible, (you always need to be able to read it still though) but their most important role is to evoke a feeling as a design element, marking a particular passage or section as important. Playful, old-fashioned, subdued, formal, modern, whatever needs to be conveyed, there is a typeface that will help do it. These may be broken down further into two distinct categories, display and accent, with accent fonts being reserved for very short amounts of text to make it stand out as something very different than your normal navigation and such. Think “on sale now” and “300 ladybugs missing” These are much trickier to pick as they need to stand out and be distinct, but they still need to look like they belong. Sort of like your favorite uncle…
Size. It really does matter, like, alot. Too small and your readers are squinting to read, and too large and you have to scroll to get to the next sentence. Somewhere in between is where you want to be. The web default text size on most modern browsers is 16pt. There is a reason it’s this size, and it’s a good reason, it’s because that’s the size that most people can read without squinting and at the same time don’t feel like their screen real estate is being wasted.
That said, rarely set your text size to 16pt or any other point size for that matter. Use ‘rem’ instead, which stands for ‘root element’. This is a scaling factor of the size set by the viewers browser. And since most browsers are set at 16pt. 1rem will display at 16pt. .75rem at 12pt, 2em at 32pt etc. This way the relative size of all of your text will stay the same regardless of the viewers browser settings. If the browser is set to display root text at 20pt. due to difficulty seeing your page text will all scale appropriately. The main caveat to this is when your text needs to fit on a graphic that you don’t want to scale, then use points instead to prevent surprises.
Em may also be used similarly, but it takes its value from the preceding html elements font sizing. ie, you set the point size in the div tag and ’em’ is a factor of that size, not the browsers root text size. em goes up the parent, grand parent tree by the way, until it hits a listed point size which if not explicitly set somewhere in the tree, will eventually use the browsers root size, so it sometimes behaves the same, but you need to be a bit more mindful when you use it.
And don’t forget to use text links! It’s called HTML for a reason. Hyper text is the added value that the reader gets by being able to click a word or phrase and learn more about it. This needs to be used judiciously however to ensure that your reader doesn’t get whisked away to Wikipedia never to return…
Tool tips are often times the answer to this apparent dilemma. Let the user hover their mouse or click on the link to then be greeted by a popup with a short clarifying statement. Then the users that need more clarification can get it, but the ones with more familiarity to the subject can read unencumbered with undesired explanations (noun. a statement or account that makes something clear…)
Graphics
This is where most of the eye candy is located. JPEG, GIF, PNG, SVG etc make up the encoding formats of this domain, and are so ubiquitous that some people will call any full color image a jay-peg, or if your older any limited color palette graphic as a giff, or jiff for the uncouth. Yes I know that the originator of the format calls it jiff. But the first letter stands for graphic with a hard ‘G’ NOT jraphic. Wow, that looks weird…
User Experience
In the world of tech otherwise simply reffered to as UX. This is how a user/customer/reader interacts with something, in this context a website. Are they having to click 5 times to change their email? Do they go to the left or to he right for navigation? Is it consistent?
User Interface
This is similar ot first glance to UX but this more strictly refers to the skin on top of the UX. I.e is the choice displayed in this section as a dropdown menu, radio buttons, or checkboxes? Should this be our sites primary or secondary color? These are the things of UI design. Although if you’re reading this you’re probably doing it all yourself, you still would be wise to break it into domains so that you can analyze it more objectively
