About

This guide covers the basics of good typography , explaining theories behind font choices, and certain details of creating legible, and good looking text. Once you go through this style guide you will know some of the DO's and DON'T's to web typography, from the absurd to the unseemly. This blog even covers some CSS so stick around and you might learn something.
Showing posts with label color. Show all posts
Showing posts with label color. Show all posts
0 comments

Contrast

Contrast is a very important element in design that most of the time we take for granted. It helps with the organization of the page and also with the legibility and readability. Contrast in the case of size would be when the headings are put at a bigger size than the body text. This creates contrast thus separating the different page elements. Another form of contrast would be with different typefaces or styles. Italic and bold faces set them apart from the rest of the text creating contrast just as serif typefaces can be used for headings and sans-serif for the body text. Contrast can also be used when all the text has the same typeface with changing the cases. Uppercase often draws more attention than lowercase and is thus more suitable for headings. The CSS property to change the case size is text-transform: uppercase.Try to avoid using uppercase in the body text or in a long sentence because it will reduce readability.Color is another tool for contrast. It helps define different elements of the page and sets things like links apart from the rest of the text. Contrast in terms of color is also found between the color of the text and the color of the background. The colors should differ enough, have enough contrast, to make the text legible. If two pastels are used, like pale blue and pink, then the contrast isn't high enough to make the text easily discernible. An easy way to check the contrast between the type and the background, if ever unsure, then bring the page into a picture editor and view the page in Grey-scale. If you can easily read the text and discern it from the background then the contrast is high enough to make the page easy to read.There is a debate as which is easier to read, light text on a dark background or dark text on a light background. I find that both are easy to read but in some cases one is easier than the other. If I'm in a dark room sitting at a computer screen late at night then the one that will be easier on my eyes would be white text on a black background as this will have less illumination from the computer screen. When I'm reading text in the day then the regular method, black text on a white background, is easier on my eyes. It also depends on whether the person has a lack of sleep or their disposition at the time. At least from my experience.
0 comments

Typography and Style

When it comes to style Typography is at its most creative. The style of the type can either depend on the color, the weight, underlined or italics, and the typeface. This, for a designer like myself, is the most interesting part of typography and it can often be the trickiest. There are many things that we often want to experiment with that, in real life, would be hurtful to the content and the user. I like to play with script and grunge fonts. However, there are certain limits to how far one can go with the style that the user can handle.
  • Color
    Colors are often used more than just for decoration when dealing with type. Though color can be useful for the look and feel of the theme of the page and for things such as branding, color is mainly used to distinguish navigation, headlines, links, and body text.Colors can even be used for showing that something is disabled like in the case of buttons. This can also be used to show depth like atmospheric perspective, when something is further away it is often lighter in color and less defined.Color can also be used to show emphasis to something like a warning or to set something apart from the rest of the text.

    Warning: This message will self-destruct in 10 seconds

    Though it isn't used much in body text, often headlines can be all one word with different colors defining the individual words.

    READMYBLOG

    Honestly, when it comes to color I often only think about the contrast between the text and its surroundings, to make it more legible, and the "theme" or color choices I've made for the page or site.
  • Weight
    Weight is often used for emphasis like making things bold. This can draw more attention to certain words you want the reader to remember or see first.

    Being bold can draw attention.

    It's important to remember that if an entire body of text is in bold then the emphasis or contrast is lost.

    Avoid making everything bold.

    I often increase the weight of text for headings only. It depends on how well I want the text to stand out. Bold can be good for titles and banners but for certain typefaces I try to avoid increasing the weight.
  • Italic Text
    Using italics, like bold, is often for emphasis without changing the weight of the text. I often use italics for references, quotations, and citations.

    “Live every moment as if it were your last.”

    These come in handy on reports but I rarely use them on web pages. Italics can also be used for sub-headings. I find that I don't like the outcome of this method but on certain typefaces it seems to work. On others, however, the text loses its legibility and becomes hard to read. It would definitely be unwise to create an entire body of text bold as this is too much of a strain for the eyes.
  • Underlined Text
    Underlined text is advised against due to users mistaking it for a link. If you want to use it for emphasis then I suggest bold, color, or italics instead. Using underlined text as links is the appropriate use and can help ease user navigation. If a link isn't underlined then it's hard to find all the links and can be hazardous to the user. If, however, you absolutely need to underline text for emphasis then I suggest having the links a specific color to show that that underlined text is in fact a link. I have yet to use underlined text in my pages except for the default for links.

    I'm a link, but I am not.