Color schemes, web typography, and testing browsers

Standard

{information taken from BYU Idaho, CIT 230}

Color

Tint—The resulting color when white is added
Tone—The resulting color when gray is added
Shade—The resulting color when black is added
example

Using all of them together with the main hue is a monochromatic color scheme

This color site is amazing: http://paletton.com/ . You can input a hex color in this tool to generate a color scheme from a specific color.

The four basic color schemes are: monochromatic, complementary, triadic, and tetradic.


Typography

Limitations of the web typography include:

  • A reduced selection of fonts
  • No hyphenation, making full justification look ugly when a column of text gets narrow
  • Limited control over kerning (ie. the spacing between the letters)
  • A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions, and environments

Typography on the web

Two popular web font services are Google and Typekit

Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well.

When it comes to aligning your text within its container, there are four options: left-aligned, right-aligned, center-aligned and fully-justified. Fully-justified text, where both the left and right edges of the block are aligned to the vertical sides of their container. On the web, however, it’s problematic due to the lack of automatic hyphenation, which breaks words at appropriate points to better fit them in the line. To avoid this, you should use left-aligned text for the most part on the Web.

Kerning is the process of adjusting the spacing between particular pairs of letters.

On the web, tracking is better known as letter spacing and is controlled with CSS. Letter spacing with CSS is a difficult property to use effectively due to this all-or-nothing nature, and for this reason it is best used sparingly.

You just have to get used to the idea that people will want to read your content on a variety of devices in a variety of environments in a variety of ways.

It’s good practice to include back-up selections when specifying your preferred display font. So, rather than simply specifying “Georgia,” you could specify “Georgia, Cambria, Times New Roman,Times, serif.”

To aid readability, the average length of a line of text within your containing block should be around 40–60 characters per line. Readability.

Line height — the vertical space between your lines, and you can make your type more readable by increasing it a little above the browser default. The typical ratio of font-size to line-height is 1:1.2. This means that if your font-size is 14px, the line-height will be approximately 17px.

Drop cap — where the first letter takes up about 3–4 lines of text.

Small-caps variation—a set of capitalized letters that are uppercased but approximately the size of the lowercase variant.

Typographic HTML– entities that are available such as “smart” or “curly” quotes and en (–) and em (—) dashes. A lot of blogging and word processing software will automatically do this for you as you type.

html entities

Pull-quote– a short extract from your text that appears elsewhere on your page with a larger text size, and sometimes a different font, to draw attention to it. Just make the text larger, perhaps set it in a different font, position it so that the regular text wraps around it and you’re done.

Limiting the number of fonts adds continuity to the site while still allowing the reader to differentiate between headings and body copy when they’re scanning the web page.

San Serif for body copy– it has become a traditional body copy typeface for the Web.

So, in the end, legibility is what matters.

The point is to align all the important elements on the page so they flow smoothly.


Testing

Check for errors, typos, and that links are all working.

Use the W3C validators to check HTML and CSS code every time you add new code to web pages. Without this step, the next step is a moot issue, as one code error can throw a web page design off in any number of browsers.

Try downloading several versions of one operating system on one machine, the advice from friends and/or forums, and the use of services that provide screen captures. Use screen captures for testing in most cases.

Try using this site to see how a machine would read your site.


A class mate shared these sites for lettering and kerning control in JQuery.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s