Color ad Typegraphy

COLOR AND TYPOGRAPHY

Color

CSS supports a wide variety of colors. These include named colors, like blue, black, and LimeGreen, along with colors described by a numeric value. Using a numeric system allows us to take advantage of the whole spectrum of colors that browsers support. In this lesson, we’re going to explore all the color options CSS offers.

Colors in CSS can be described in three different ways:

  • Named colors — English words that describe colors, also called keyword colors
  • RGB — numeric values that describe a mix of red, green, and blue
  • HSL — numeric values that describe a mix of hue, saturation, and lightness

We’ll learn about and explore the benefits of each of these in depth. Using only named colors, you may feel like you’re picking labeled crayons out of a box. By the end of this lesson, you’ll feel like a painter mixing paints on a palette.

Foreground vs Background

Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects:

  1. The foreground color
  2. The background color

Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled.

Conversely, when a heading is styled so that its background appears yellow, the background color of the heading has been styled

In CSS, these two design aspects can be styled with the following two properties:

  1. color – this property styles an element’s foreground color.
  2. background-color – this property styles an element’s background color.
h1 {
color: Red;
background-color: Blue;
}

In the example above, the text of the heading will appear in red, and the background of the heading will appear blue.

Hexadecimal

One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors. A hex color begins with a hash character (#) which is followed by three or six characters. The characters represent values for red, blue and green.

DarkSeaGreen: #8FBC8F
Sienna: #A0522D
SaddleBrown: #8B4513
Brown: #A52A2A
Black: #000000 or #000
White: #FFFFFF or #FFF
Aqua: #00FFFF or #0FF

In the example above, you may notice that there are both letters and numbers in the values. This is because the hexadecimal number system has 16 digits (0-15) instead of 10 (0-9) like you are used to. To represent 10-15, we use A-F. Here is a list of many different colors and their hex values.

Notice that Black, White, and Aqua are all represented with both three characters and six characters. This can be done with hex colors whose number pairs are the same characters. In the example above, Aqua can be represented as #0FF because both of the first two characters are 0 and the second and third pairs of characters are both Fs. Keep in mind that all three character hex colors can be represented with six characters (by repeating each character twice) but the same is not true in reverse.

You can include hex colors just as you would include named colors: background-color: #9932cc;.

RGB Colors

There is another syntax for representing RGB values that uses decimal numbers. It looks like this:

h1 {
color: rgb(23, 45, 23);
}

Here, each of the three values represents a color component, and each can have a decimal number value from 0 to 255. The first number represents the amount of red, the second is green, and the third is blue. These colors are exactly the same as hex, but with a different syntax and a different number system.

In general, hex and decimal color representations are equivalent. Which you choose is a matter of personal taste. That said, it’s good to choose one and be consistent throughout your CSS, because it’s easier to compare hex to hex and decimal to decimal.

Hex and RGB

The hexadecimal and RGB color system can represent many more colors than the small set of CSS named colors. We can use this new set of colors to refine our web page’s style.

In both hex and decimal, we have three values, one for each color. Each can be one of 256 values. Specifically, 256 * 256 * 256 = 16,777,216. That is the amount of colors we can now represent. Compare that to the 147 named CSS colors!

Recall that we started with named colors, converted them to hex, and then converted some of the hex colors to decimal. Unless we made a mistake, all of the colors should still be the same, visually. Let’s use our broadened palette to make some more refined color choices.

Hue, Saturation, and Lightness

The RGB color scheme is convenient because it’s very close to how computers represent colors internally. There’s another equally powerful system in CSS called the hue-saturation-lightness color scheme, abbreviated as HSL.

The syntax for HSL is similar to the decimal form of RGB, though it differs in important ways. The first number represents the degree of the hue, and can be between 0 and 360. The second and third numbers are percentages representing saturation and lightness respectively. Here is an example:

color: hsl(120, 60%, 70%);

Hue is the first number. It refers to an angle on a color wheel. Red is 0 degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at 360. You can see an example of a color wheel below:

Saturation refers to the intensity or purity of the color. If you imagine a line segment drawn from the center of the color wheel to the perimeter, the saturation is a point on that line segment. If you spin that line segment to different angles, you’ll see how that saturation looks for different hues. The saturation increases towards 100% as the point gets closer to the edge (the color becomes more rich). The saturation decreases towards 0% as the point gets closer to the center (the color becomes more gray).

Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up towards 100% makes the color lighter, closer to white. Sliding the dimmer down towards 0% makes the color darker, closer to black.

HSL is convenient for adjusting colors. In RGB, making the color a little darker may affect all three color components. In HSL, that’s as easy as changing the lightness value. HSL is also useful for making a set of colors that work well together by selecting various colors that have the same lightness and saturation but different hues.

Opacity and Alpha

All of the colors we’ve seen so far have been opaque, or non-transparent. When we overlap two opaque elements, nothing from the bottom element shows through the top element. To use opacity in the HSL color scheme, use hsla instead of hsl, and four values instead of three. For example:

color: hsla(34, 100%, 50%, 0.1);

The first three values work the same as hsl. The fourth value (which we have not seen before) is the alpha. This last value is sometimes called the opacity.

Alpha is a decimal number from zero to one. If alpha is zero, the color will be completely transparent. If alpha is one, the color will be opaque. The value for half transparent would be 0.5.

You can think of the alpha value as, “the amount of the background to mix with the foreground”. When a color’s alpha is below one, any color behind it will be blended in. The blending happens for each pixel; no blurring occurs.

The RGB color scheme has a similar syntax for opacity, rgba. Again, the first three values work the same as rgb and the last value is the alpha. Here’s an example:

color: rgba(234, 45, 98, 0.33);

Alpha can only be used with HSL and RGB colors; we cannot add the alpha value to color: green color: #FFFFF.

There is, however, a named color keyword for zero opacity, transparent. It’s equivalent to rgba(0, 0, 0, 0). It’s used like any other color keyword:

color: transparent;

TYPOGRAPHY

In this lesson, we’ll focus on typography, the art of arranging text on a page. In particular, we’ll look at how to style fonts with CSS to make them legible and appealing and how to add external fonts to your web pages.

Some of the most important information a user will see on a web page will be textual. Styling text to make page content accessible and engaging can significantly improve user experience. Let’s begin!

Font Family

If you’ve ever used a formatted word processor, chances are that you probably also used a feature that allowed you to change the “type of font” you were typing in. The phrase “type of font” refers to the technical term typeface, or font family.

To change the typeface of text on your web page, you can use the font-family property.

h1 {
font-family: Garamond;
}

In the example above, the font family for all main heading elements has been set to Garamond.

When setting typefaces on a web page, keep the following points in mind:

  1. The font specified in a stylesheet must be installed on a user’s computer in order for that font to display when a user visit the web page.
  2. How exactly does the browser know what typeface to use when displaying the web page? The default typeface for all most browsers is Times New Roman. You may be familiar with this typeface if you have ever used a formatted word processor.
  3. It’s a good practice to limit the number of typefaces used on a web page to 2 or 3.
  4. When the name of a typeface consists of more than one word, it must be enclosed in double quotes (otherwise it will not be recognized), like so:
h1 {
font-family: “Courier New”;
}

Font Weight

You’ve probably noticed bold text in websites you use, especially in news or text-heavy sites. It’s common to bold important headings or keywords. In CSS, we can style bold text with the font-weight property.

If we want to bold text in a web page, we can set the font-weight to bold.

p {
font-weight: bold;
}

If we want to ensure that text is not bold, we can set the font-weight to normal.

p {
font-weight: normal;
}

By default, the font-weight of most text elements is set to normal. Some elements, like headers, have built-in bold styling. A good approach is to check to see if the the text element has any default styling, and use the font-weight property accordingly.

The font-weight property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Valid values are multiples of 100 within this range such as 200 or 500.

When using numeric weights, there are a number of default font weights that we can use:

  1. 400 is the default font-weight of most text.
  2. 700 signifies a bold font-weight.
  3. 300 signifies a light font-weight.

Let’s take a look at an example of how numeric fonts are used.

header {
font-weight: 800;
}footer {
font-weight: 200;
}

Here, the header would appear as a deep bold, while the footer would appear rather light.

It’s important to note that not all fonts can be assigned a numeric font-weight. You can look up the font you are using to see which font-weight values are available.

Font Style

You can also italicize text with the font-style property.

h3 {
font-style: italic;
}

The italic value causes text to appear in italics. The font-style property also has a normal value which is the default.

Word Spacing

You can also increase the spacing between words in a body of text, technically known as word spacing.

To do so, you can use the word-spacing property:

h1 {
word-spacing: 0.3em;
}

The default amount of space between words is usually 0.25em. In the example above, the word spacing is set to 0.3em, which represents an increase of only .05em in word spacing.

It’s not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text. Note, again, that the preferred unit is ems.

Letter Spacing

You’ve learned how to increase the spacing between lines of text and words, but it’s possible to get even more detailed: increasing the spacing between individual letters.

The technical term for adjusting the spacing between letters is called tracking. Tracking can be adjusted with the letter-spacing property in CSS.

h1 {
letter-spacing: 0.3em;
}

Like word spacing, it’s not common to increase the tracking in text, but sometimes it enhances the readability of uppercase text.

Text Transformation

Text can also be styled to appear in either all uppercase or lowercase with the text-transform property.

h1 {
text-transform: uppercase;
}

The code in the example above formats all <h1> elements to appear in uppercase, regardless of the case used for the heading within the HTML code. Alternatively, the lowercase value could be used to format text in all lowercase.

Since text can be directly typed in all uppercase or lowercase within an HTML file, what is the point of a CSS rule that allows you to format letter case?

Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters. For example, a website that reports breaking news may decide to format all <h1>heading elements such that they always appear in all uppercase, as in the example above. It would also avoid uppercase text in the HTML file, which could make code difficult to read.

Text Alignment

No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser.

To move, or align, text, we can use the text-align property.

h1 {
text-align: right;
}

The text-align property can be set to one of the following three values:

  1. left – aligns text to the left hand side of the browser.
  2. center – centers text.
  3. right – aligns text to the right hand side of the browser.

Later in the course, you’ll learn exactly how the browser positions HTML elements by default, which will help you understand how the browser “aligns” text, since “align” is a relative term. For now, it’s enough to know that text can be moved to the left, center, or right side of the web page.

Line Height Anatomy

Another property that we can set for text is line-height. This property modifies the leading of text.

The diagram to the right helps illustrate exactly what the terms “leading” and “line height” mean.

Line Height

We often modify line-height to make text on a web page easier to read. When text is styled to appear larger, the vertical spacing between lines of text can decrease, creating text that is difficult to read, particularly in paragraphs.

We can use the line-height property to set how tall we want the line containing our text to be, regardless of the height of the text. Line heights can take one of several values:

  1. A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size.
  2. A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.

Generally, the unitless ratio value is the preferred method, since it is responsive and based exclusively on the current font size. In other words, if we change the font size, a unitless line-height would automatically readjust, whereas the pixel value would remain static.

p {
line-height: 1.4;
}

Serif and Sans Serif

You’ve learned a lot of properties to modify text on a web page! What exactly do these words mean?

  1. Serif — fonts that have extra details on the ends of each letter. Examples include fonts like Times New Roman or Georgia, among others.
  2. Sans-Serif — fonts that do not have extra details on the ends of each letter. Instead, letters have straight, flat edges, like Arial or Helvetica.

Fallback Fonts

What happens when a stylesheet requires a font that is not installed on a user’s computer? Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times New Roman and sans-serif fonts like Arial.

These pre-installed fonts serve as fallback fonts if the stylesheet specifies a font which is not installed on a user’s computer.

To use fallback fonts, the following syntax is required:

h1 {
font-family: “Garamond”, “Times”, serif;
}

The CSS rule above says:

  1. Use the Garamond font for all <h1>elements on the web page.
  2. If Garamond is not available, use the Times font.
  3. If Garamond and Times are not available, use any serif font pre-installed on the user’s computer.

The fonts specified after Garamond are the fallback fonts (Times, serif). Fallback fonts help ensure a consistent experience for the diverse audience of users that visit a site.

Linking Fonts

With the number of fonts available with modern typography, it is unrealistic to expect users to have all fonts installed on their computers. New fonts are often centralized in directories made available for public use. We refer to these fonts as non-user fonts.

Google Fonts is one such directory of thousands of open-source fonts, available for free use. Google Fonts gives us a way to retrieve the link for a single font, multiple fonts, or multiple fonts with the font-weight and font-style properties.

When we have the link to the font of our choice, we can add the font to the <head>section of the HTML document, using the <link> tag and the href.

Let’s take a look at a few examples:

1. A single linked font, using Droid Serif as an example:

<head>
<link href=”https://fonts.googleapis.com/css?family=Droid+Serif” type=”text/css” rel=”stylesheet”>
</head>

2. Multiple linked fonts, using the Droid Serif and Playfair Display fonts as an example:

<head>
<link href=”https://fonts.googleapis.com/css?family=Droid+Serif|Playfair+Display” type=”text/css” rel=”stylesheet”>
</head>

3. Multiple linked fonts, along with weights and styles. Here Droid Serif has font weights of 400, 700, and 700i, while Playfair Display has font weights of 400, 700, and 900i:

<head>
<link href=”https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i|Playfair+Display:400,700,900i” rel=”stylesheet”>
</head>

Once a font is linked, we can create CSS selectors to target elements, just as we do with other fonts.

Font-Face

There are other ways to link non-user fonts that don’t require the use of the <link> tag in the HTML document. CSS offers a way to import fonts directly into stylesheets with the @font-face property.

To load fonts with the @font-face property:

  1. Instead of using the font’s link in the HTML document, enter the link into the URL bar in the browser.
  2. The browser will load the CSS rules. You will need to focus on the rules that are directly labeled as /* latin */. Some of the latin rules are on separate lines. You will need each of these.
  3. Copy each of the CSS rules labeled latin, and paste the rules from the browser to the top of style.css.

It is important to stress the need to copy the @font-face rules to the top of the stylesheet for the font to load correctly in the project.

We can then use the fonts in the stylesheets as you would use any other font. Let’s practice loading an external font in our stylesheets using the @font-face property, and using the font to style our page.

While Google Fonts and other resources can broaden font selection, you may wish to use an entirely different font or abstain from using a font from an external service.

We can modify our @font-face rule to use local font files as well. We can supply the user with the desired font family and host it along with our site instead of depending on a different site.

@font-face {
font-family: “Roboto”;
src: url(fonts/Roboto.woff2) format(‘woff2’),
url(fonts/Roboto.woff) format(‘woff’),
url(fonts/Roboto.tff) format(‘truetype’);
}

Here, you’ll notice:

  1. The main difference is the use of a relative file path instead of a web URL.
  2. We add a format for each file to specify which font to use. Different browsers support different font types, so providing multiple font file options will support more browsers.

As of now .woff2 appears to be the way of the future, due to greatly reduced file sizes and improved performance, but many browsers still don’t support it. There are lots of great sources to find fonts to use locally, such as Font Squirrel.

Review

Let’s review the key information we’ve learned. There are four ways to represent color in CSS:

  • Named colors — there are 147 named colors, which you can review here.
  • Hexadecimal or hex colors
    • Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by “A” to “F”.
    • Hex values always begin with # and specify values of red, blue and green using hexadecimal numbers such as #23F41A.
  • RGB
    • RGB colors use the rgb() syntax with one value for red, one value for blue and one value for green.
    • RGB values range from 0 to 255 and look like this: rgb(7, 210, 50).
  • HSL
    • HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).
    • Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages like this: hsl(200, 20%, 50%).
  • You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage.

Let’s review what you’ve learned about typography:

  • Typography is the art of arranging text on a page.
  • Text can appear in any number of weights, with the font-weight property.
  • Text can appear in italics with the font-style property.
  • The vertical spacing between lines of text can be modified with the line-height property.
  • Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
  • Fallback fonts are used when a certain font is not installed on a user’s computer.
  • Google Fonts provides free fonts that can be used in an HTML file with the <link>tag or the @font-face property.
  • Local fonts can be added to a document with the @font-face property and the path to the font’s source.
  • The word-spacing property changes how far apart individual words are.
  • The letter-spacing property changes how far apart individual letters are.
  • The text-align property changes the horizontal alignment of text.

Exercise

Open this link and complete the exercise: https://github.com/basir/learn-css/tree/master/project-css-e1-color

Open this link and complete the exercise: https://github.com/basir/learn-css/tree/master/project-css-f1-typography