Typography II: Fonts to the page

We have typography on the web!

As John Allsopp points out in his blog Happy 17th Birthday CSS we have come a long way but we still have very far to go.

When I first started playing with web design back in 1996 the web was just plain. It was meant as a way to exchange information, not produce the high-end, high-gloss content we see today.

Surprisingly enough we’ve had the ability to embed fonts for over a decade. CSS2 included the ability to embed fonts when it was first released but it wasn’t highly used until CSS3 came out and fount foundries decided that there was money to be made online.

New elements in HTML5 and CSS3 (web fonts among them) allow some wonderful work to be done online without having to resort to images or overtly complicated CSS and Javascript tricks to make it look somewhat like what the designer had originally envisioned.

Examples of good web typography

Licensing: the big pain in the ass

Unfortunately every time we want to work with web fonts the ugly licensing monster raises its head. It’s not just a matter of purchasing the font, converting it to the correct formats (see How do we add fonts to the web? for the actual formats and process involved) but it also involves making sure that the font license allows you to use the font with @font-face techniques (read the EULA that comes with your font to make sure).

@font-face Embedding (Linking)

I didn’t include the @font-face font embedding method in the list above because it’s a different animal. @font-face doesn’t use PHP, JavaScript or Flash to embed the font. It solely relies on CSS and a compatible browser (see @font-face and 15 Free Fonts You Can Use Today for more information).

Information around the web isn’t exactly clear on this but my opinion is that the @font-face method isn’t really “embedding” but instead linking because you’re simply telling the browser where the actua font file is via CSS. This means the font file is directly accessable to your visitors, making this method quite different than the ones listed above.

Even if the font license permits font embedding, it may not permit embedding with @font-face because this method allows direct access to the font file. Microsoft uses the .eot font format (Embedded OpenType) as a solution to this problem. EOT is supposed to respect the flags in the font files for embedding and can be limited to specific domains. Non-IE browsers however, have not adopted this technology and don’t plan to. That means you’ll need to use a .ttf or .otf version of the font for non-IE browsers if you want true cross-browser compatibility.

If you decide to use @font-face, be absolutely, positively sure that the font license allows it. It should specifically state the use of @font-face is permitted and if there are any additional restrictions (ie. give credit somewhere).

From http://blog.themeforest.net/general/font-licensing-for-the-web/

Can I use an Adobe font on the web?

Adobe’s current End-User License Agreement (EULA) for fonts does not permit font linking with @font-face using any font format, including, but not limited to, desktop (“raw”) fonts and the Web Open Font Format (WOFF). Adobe provides select Adobe Web Fonts for use on the web through the Adobe Typekit® web font service, where web font usage is governed by the Typekit service Terms of Use.

A font’s usage permissions are specified in your EULA that accompanied the font when you acquired it. Refer to your EULA to determine the type of usage permitted.

From: http://www.adobe.com/products/type/font-licensing/licensing-faq.html

Typekit and other similar services provide an alternative licensing model. When you use Typekit-like services the fonts remain on the company’s server and you link to them using special Javascript that is specific to a user’s account.

What is Typekit?

The Adobe Typekit service provides secure, subscription-based web font hosting for web designers and developers, made possible by the @font-face rule. Typekit subscribers have access to a collection of fonts that can be used on basically any web site. You can view the Adobe Web Fonts available on the Typekit service on Adobe’s foundry page.

Although Typekit relies on the @font-face rule to work, it is different from web fonts used by end users. Fonts remain protected on the Typekit servers and are dynamically delivered to browsers in the appropriate format to ensure an optimal and consistent typographic experience. Typekit offers user-friendly integration with CSS and HTML code, and other optimizations, like font subsetting.

From: http://www.adobe.com/products/type/font-licensing/licensing-faq.html

You can pick fonts where the license specifically allow unrestricted use of the software. For example the Ubuntu font license states that:

This licence allows the licensed fonts to be used, studied, modified and redistributed freely. The fonts, including any derivative works, can be bundled, embedded, and redistributed provided the terms of this licence are met. The fonts and derivatives, however, cannot be released under any other licence. The requirement for fonts to remain under this licence does not require any document created using the fonts or their derivatives to be published under this licence, as long as the primary purpose of the document is not to be a vehicle for the distribution of the fonts.

From http://font.ubuntu.com/license

A final alternative is a service like Google fonts that provides easy access to a growing number of fonts. Like with the Typekit service, the fonts are still hosted on Google’s servers and it provides you with links to use in your CSS or Javascript.

http://nicewebtype.com/notes/2009/07/19/type-sellers-web-fonts-and-typekit/

Is cost an option? (my font pricing horror story)

I’ve loved Stone Sans Humanist ever since I first saw it used in an MIT Press book (The Second Self by Sherry Turkle, I belive). I loved the way that it flowed on the page and how it looked. I didn’t know any better to know the technical aspects of the font. I only knew I really liked it.

Fast forward 12 years. I’m working on an eBook project and I decided I wanted to use my favorite font in my own project. Not only the font wasn’t available for embedding at the time but the cost to license the font for embedding in an eBook was prohibitive at the time and it was very restrictive.

That is the primary reason why I’ve turned to free/open source fonts for most of my work. I’ve also subscribed to the full Typekit service to make sure that the fonts I want are available for the projects I work on even this will not solve the problem because not all fonts are available for all providers (sadly Stone Sans Humanist is not available through Typekit nor through the vendor’s free font service; you).

Where do I find fonts for embedding?

Below is a partial (and already outdated) list of fonts that are available for embedding. This small list does not include Google Fonts or Typekit (which provides a limited free service)

Where do we find good and free fonts?

The list below include fonts and font collections I’ve used in projects in the past

Practice

How do we add fonts to a web page?

One of the first things we need to realize is that there are multiple fonts for a given type. For most people making a font bold is just a matter of highlighting the text and pressing Command (or Control) + B but for graphic designers and other people who work with type (online and off) that is sacrilege. When you make a font bold you’re actually assigning a bold font to the text.

Font and CSS declarations


@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}

@font-face {
font-family: "Your bold typeface";
src: url("type/filename-bold.eot");
src: local("☺"),
url("type/filename-bold.woff") format("woff"),
url("type/filename-bold.otf") format("opentype"),
url("type/filename-bold.svg#filename-bold") format("svg");

@font-face {
font-family: "Your italic typeface";
src: url("type/filename-ital.eot");
src: local("☺"),
url("type/filename-ital.woff") format("woff"),
url("type/filename-ital.otf") format("opentype"),
url("type/filename-ital.svg#filename-ital") format("svg");
}

h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

See the Pen Example font-face declaractions by Carlos Araya (@caraya) on CodePen.
2039

See Paul Irish’s @fontface gotchas/ for some early pitfalls of @fontface use

The different font formats used above are explained in the following table:

String Font Format Common extensions
“woff” WOFF (Web Open Font Format) .woff
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Typekit

Typekit assigns each user’s kit (one or more fonts packed together) a unique ID that is part of the script yuou are asked to use. The script looks something like this:



See the Pen Typekit font import by Carlos Araya (@caraya) on CodePen.
2039

The code above will only work for a single website, specified on the account where the kit was created from.

Google Fonts

Google Fonts allow you to embed fonts in one of three ways:

HTML Link in the head of your document along with your style sheets and scripts.


See the Pen Google Fonts HTML Link by Carlos Araya (@caraya) on CodePen.
2039

CSS Import from your CSS files.


@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:500,500italic|Exo+2:400,100,400italic);

<

p>See the Pen Google Fonts CSS Import by Carlos Araya (@caraya) on CodePen.
2039

Javascript import from within your scripts.


WebFontConfig = {
google: { families: [ 'Alegreya+Sans+SC:500,500italic:latin', 'Exo+2:400,100,400italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

See the Pen Javascript Google Font Loading by Carlos Araya (@caraya) on CodePen.
2039

One font does not fit all: Formats, details and workarounds

Using the following @font-face declarations we have taken care of the defaults for each @font-face declaration by making the bold and italic fonts actualy be bold and italics and, unless the font is actually condensed or stretched, make it explicit that it’s a normal font, not stretched or compressed (if we need to change this we can do it for specific elements).

Another issue to consider is that not all browsers support the same fonts (surprise, surprise). Internet Explorer supports Embedded Open Type fonts, Firefox prefers WOFF, Chrome, Safari and Opera prefer OTF (Open Type Font) or TTF (True Type Fonts) fonts and iOS prefers SVG (Scalable Vector Graphics) fonts.

I built the @font-face declarations below using Paul Irish Bulletproof @font-face syntax.

The original article is a little dated but it is still the best way to work with @font-face declarations on the web because it preserves the same font across all browsers and devices.

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  font-weight: normal;
  font-style: nomal;
  font-stretch: normal;
}

@font-face {
  font-family: "Your bold typeface";
  src: url("type/filename-bold.eot");
  src: local("☺"),
    url("type/filename-bold.woff") format("woff"),
    url("type/filename-bold.otf") format("opentype"),
    url("type/filename-bold.svg#filename-bold") format("svg");
  font-weight: bold;
  font-style: nomal;
  font-stretch: normal;
}

@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  }

See the Pen Multiple @font-face assignments in a single CSS file by Carlos Araya (@caraya) on CodePen.

We can then fine tune our styles by setting properties for elements and selectors as needed. I usually start with setting up a default font and size/line height that will be carried throughout the document. I also provide a stack of backup fonts so that the browser will use the first font in the stack that is available to display the content, finally dalling back to one of the predefined font families (sans-serif, serif, fantasy, cursive, monospace)


html {
font-family: "Your typeface", Georgia, sans-serif;
font-size: 62.5%;
line-height: 1.5;
}

See the Pen Finetuning elemements with @font-face defined fonts by Carlos Araya (@caraya) on CodePen.
2039

Fighting FOUT

The Flash of Unstyled Text is a phenomenon in Firefox and Opera that few web designers are fond of. When you apply a custom typeface via @font-face, there is a brief moment, when loading the page, where the font hasn’t been downloaded and applied yet, and the next font in the font-family stack is used. This causes a flash of a different (typically less good looking) font, before it gets upgraded.

Unless you’re designing for ancient browsers (Firefox 3.5 and 3.6 and Opera from th at same time period) FOUT shouldn’t be that big an issue anymore.

If you still need to account for that, you can follow the instructions fom Paul Irish

Styles and typographical elements

Italics

Once we have decided on what font stack we will use, we can create our general styles. For example, to create an Italic level 1 heading (<h1>) we could code it like this:


h1.italics {
font-family: "Your italic typeface", Georgia, sans-serif;
font-style: italic;
}

See the Pen Setting up italics fonts for H1 tag using @font-face defined fonts by Carlos Araya (@caraya) on CodePen.
2039

Bold

If we need a bold text for some emphasis we can make our strong tags bolder by using something like:


h1.strong: {
font-weight: 700;
}

See the Pen Assiging bold weight with a @font-face defined font by Carlos Araya (@caraya) on CodePen.
2039

In addition to the standard bold value, CSS allows us to use the value bolder and numerical values from 100 to 700. The differences may be subtle but they are important as seen in the example below:

Comparison between different font weights

See the Pen Comparison between numeric values of the font-weight property by Carlos Araya (@caraya) on CodePen.

The result of the rule above will depend either on available font faces within a font family or weights defined by the browser.

Text-decoration

The text-decoration property has a set of predefined values that we can use deepnding on what visual result we want to accomplish. The valid values are:

  • underline
  • overline
  • line-through
  • none

One additional consideration is that we need to make sure to differentiate the page’s hyperlinks from the content that we choose to underline. Otherwise it’ll be confusing for our users when they try to click on underlined content and nothing happens. See the section on hyperlinks related pseudoclasses for more information.

.underline {text-decoration: underline;}

.overline {text-decoration: overline;}

.strikethrough {text-decoration: line-through;}

.none {text-decoration: none;}

Different types of Underlines using the CSS above

See the Pen Different styles of underline supported with the text-decoration CSS property by Carlos Araya (@caraya) on CodePen.2039

Font-stretch

The font-stretch property, available in CSS3, selects a normal, condensed or expanded face from a font. In order to see the result of the selection, the font being used has to have a face that matches the value given.

The font-stretch property will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes and that is available on the user’s computer or loaded with a @face-font rule.

font-stretch accepts one of the following values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Example of font-stretch

.expanded {
    font-stretch: expanded;
}

See the Pen Controlling front stretching using CSS by Carlos Araya (@caraya) on CodePen.2039

Font-variant

The font-variant property allows you to change the targeted text to small caps. It is available in CSS2 and CSS3 with the later assigning additional values to the property.

The values available in CSS2 are:

  • normal (the default)
  • small-caps

CSS3 introduced additional values for this property that are dependenant on features from Open Type being available on the font we are using.

  • all-small-caps Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp)
  • petite-caps Enables display of petite capitals (OpenType feature: pcap)
  • all-petite-caps Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap)
  • unicase Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic)
  • titling-caps Enables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

These are small caps

THESE ARE REGULAR CAPS

Other attributes we can work with

kerning and letter-spacing

In typography, kerning (less commonly mortising) is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters.1 In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have similar area.

http://en.wikipedia.org/wiki/Kerning

The font-kerning property is supposed to provide optical kerning for the font being used. It is not widely supported (if at all). I’d suggest using letter-spacing instead. It may not have the same fine grained control Kenrning does but it’s better than nothing.

Letter spacing is more widely supported and allows you to control the spacing between letters in an element or class. Look at the example below.

<style>
p.narrow { letter-spacing: 0.4em }
p.wide {letter-spacing: 1.5em}
</style>

text-align

As the name implies text align controls the horizontal placement of text on the screen. There are 8 possible values, they are:

  • start: The same as left if direction is left-to-right and right if direction is right-to-left.
  • end: The same as right if direction is left-to-right and left if direction is right-to-left.
  • left: The inline contents are aligned to the left edge of the line box.
  • right: The inline contents are aligned to the right edge of the line box.
  • center: The inline contents are centered within the line box.
  • : The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance. This property is not currently supported in any major browser.
  • justify: The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
  • match-parent: Similar to inherit with the difference that the value start and end are calculated according the parent’s direction and are replaced by the adequate left or right value. This is only supported in Chrome.

text-indent

This property indicates hw far you push the first line of text from the starting border (depending on direction of the text). Additional values control whether the indent is a hanging indent and whether it applies to only the first line or the entire block of text.

  • Fixed value (i.e: 2em): Indentation is specified as a fixed value. Negative values are allowed
  • Percentage (i.e: 20%): Indentation is a percentage of the containing block width.
  • each-line: Indentation affects the first line of the block container as well as each line after a forced line break , but does not affect lines after a soft wrap break . Introduced in the CSS3 Text Module and not currently implemented in any major browser.
  • hanging: Inverts which lines are indented. All lines except the first line will be indented. Introduced in the CSS3 Text Module and not currently implemented in any major browser.

color

See Expressing Colors in CSS below

Some typography related pseudo classes

Hyperlink related pseudo classes

Although I wouldn’t recommend it we can make some drastic changes to the way links behave and look when they are clicked or after they are visited. The link seudo classes and what they control are:

  • :link controls the link when it’s not being used (there’s no user interaction)
  • :visited applies after the link has been clicked on
  • :hover applies when the mouse is hovering over the link
  • :active applies when the link is being clicked (the state after you over over the link but before it changes to visited)

<

p>In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

a:link { color: #666666; text-decoration: none; } 
a:visited { color: #333333; } 
a:hover { text-decoration: underline; } 
a:active { color: #000000; }

See the Pen Styling links with CSS by Carlos Araya (@caraya) on CodePen.2039

::first-letter and ::first-line

The ::fisrt-letter pseudo class allows you to style the first letter of a paragraph or a chapter differently than the rest of the content. This is commonly used to create Drop Cap effects. We can limit what paragraphs get a drop cap by using the :first-child pseudo element like in the

div.dcexample p:first-child:first-letter {
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  font-family: Georgia; }

See the Pen Styling First Letter of a Chapter using CSS :first-letter pseudo class by Carlos Araya (@caraya) on CodePen.2039

::first-line does something similar but with the entire first line of the matching element. This matches when printed publiccations some times have a first line of a chapter in a slightly larger font than nthe rest of the text. In the example below we’ve set the text of the first line to 1.3 em.

div.flexample p:first-child:first-line {
  font-size: 1.3em;
  color: #666;
}

See the Pen DbnIk by Carlos Araya (@caraya) on CodePen.2039

Units of measuremet in CSS

CSS Units of Measurement

Expression colors in CSS

Expressing colors in CSS

Regions, Shapes and Exclusions

CSS regions, exclusions, shapes and new publishing paradigms

More stuff to play with: CSS Paged Media

paged media article

Typography doesn’t not replace the designer’s judgment

Links and Resources

Typography Part I: Designing Text on the page

When I first started working on web development I had absolutely no clue as to what typography was or how to make pages ‘look’ visually pleasing, easier to read and more engaging to the user.

Over the years I’ve developed a sensibility to the way text lies on the page, how it relates to the other elements on the page and how to make the text pleasing and easier to read. In more recent times I’ve learned the science to go along with the art along with the tools and resources to make it happen.

Homework to do before starting the research process

  • Read the text you’ll be working with (if possible)
  • What does the text tell you?
    • What is the text about?
  • Make notes of the fonts you look at

Some questions that will guide the research process:

  • Who is our target audience?
    • Demographics
    • Devices / Platforms
  • What kind of content are we creating?
    • One page app
    • website
    • etc
  • What is the purpose of the content we’re creating
    • Kind of content
      • Persuasion
      • Informative
      • Entertainment
      • Other

Getting Started: Research and select your font(s)

There are multiple ways to select what fonts you will use and there are multiple strategies to select the fonts. Some people will tell you to use a single font, some will tell you to use whatever will work best for the project at hand. I subscribe to this last philosophy: If a single font will do the work then by all means use a single font; however if more than one font will work better then mix the fonts as needed.

We can use words as well as images when developing our content. In searching for fonts look for trigger words and moods. What words resonate the strongest when reading or interacting with the text?

As Tim Brown suggests:

“In much the same way as we gather visual inspiration at the outset of our process, we might also begin to consider gathering verbal inspiration when we embark on a project. These verbal palettes or wordboards can help us define a design’s tone and voice and, as we’ll see shortly, are every bit as important as look and feel”.

Tim Brown – Combining Typefaces

There are multiple sources on information when it comes to researching fonts. Designers may not always have the time to do all this but the more you can do the better your design will be for it.

  • Check the publisher’s site for the font
    • What does it tell you?
    • Does it give you the information you need to decide whether the font is good for what you want it for?
      • See what the designer say about the font
      • Subscribe to newsletters like Creative Characters where type designers discuss their work and their inspiration
    • See what other people are saying about the font
    • See how it’s being used in the wild
      • Fonts in Use is a good resource to see how fonts are used in real life situations

Based on the answers and the questions above we can now go ahead and select the anchor font for your document. In my experience this has always been the main body font as it is the one that will appear the most often in your content.

You may have chose to use a single font for your entire project. Most likely you will find one or more additional fonts that will supplement and complement your original font.

The main question to ask about related fonts in how they relate to your primary anchor font. Creating specimens for each font by itself (see the section specimens below for more information about specimens) and creating a sample of your content using the proposed font combinations may give you the answer regarding the usefulness of your font.

Best Practices for Developing Font Stacks

Taken from http://sixrevisions.com/css/css-typography-01/ and expanded with examples and additional information.

All fonts in the same font stack should look similar to each other. Some fonts are wider or taller per letter than others are, giving them larger aspect ratios and the appearance of being different in size.

So, if we put Verdana (mostly Windows) with Helvetica (mostly Macs), we’ve met the above requirements. However, since Verdana is much wider than Helvetica and both fonts are available for both Windows and Macintosh computers, the text will look dramatically different on most Macs compared to most Windows computers. See below for a comparison:

See the Pen Font comparison between Verdana and Helvetica by Carlos Araya (@caraya) on CodePen

So when developing font stacks:

  • Make sure you account for the different operating systems
    • The same font looks slightly different in Windows, Mac, and Linux
  • Be consistent in the type of fonts you use throughout your document
    • Make sure that bold, italics and bold/italic fonts are available for all your selected fonts
  • Make sure the fonts in the stack have similar aspect ratios, both your external fonts (downloaded using @font-face rules) and fonts local to your system
  • Use appropriate generic fonts for the primary fonts you use (see Generic Font Families)

Here is a list of the most common fonts for various aspect ratio types:

  • Wide sans serif: Verdana, Geneva
  • Narrow sans serif: Tahoma, Arial, Helvetica
  • Wide serif: Georgia, Utopia
  • Narrow serif: Times, Times New Roman
  • Monospace: Courier, Courier New, Lucida Console

Generic Font Families

Generic Font Families are a last-resource fallback intended to work when no other font in the chosen stack is available.

According to the Mozilla Documentation Project’s Font Family page:

[blockquote]Generic font families are a fallback mechanism, a means of preserving some of the style sheet author’s intent in case when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the a last alternative in the list of font family names.

serif Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings. E.g. Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif

sans-serif Glyphs have stroke endings that are plain. E.g. ‘Trebuchet MS’, ‘Liberation Sans’, ‘Nimbus Sans L’, sans-serif

monospace All glyphs have the same fixed width. E.g. “DejaVu Sans Mono”, Menlo, Consolas, “Liberation Mono”, Monaco, “Lucida Console”, monospace

cursive Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.

fantasy Fantasy fonts are primarily decorative fonts that contain playful representations of characters.[/blockquote]

Getting started: Building the Rythm

Now that we have our scale, Let’s start with the next obvious question. What impacts a page’s vertical rhythm?

  • Font size
  • Line Height
  • Margins
  • Paddings

In order to achieve a good rhythm we have to calculate these three factors and apply them in our CSS. Here is an example of text without a good rhythm.

For the first image below, we have only set up a default font size:

Text without vertical rhythm

As you can see, the rhythm is off. After the first line the baseline does not remain constant. The further down you go in the paragraph the harder it gets and, consciously or not, reading the text gets harder.

Before we can start working on the rhythm we need to pick a time signature, or base font-size to calculate our rhythm from. For this essay, and for most of my work, I’ve selected 16px to make things easier to do the math. A line height of 1.25 x the base font size is a great place to start, based on the font face and size.

The starting CSS will have set the body font-size: 16px and line-height: 1.25 (without a unit). We’ll build from there.

The CSS looks like below:

See the Pen Base CSS for typography examples by Carlos Araya (@caraya) on CodePen

The text now looks like this:

Text in vertical rhythm

Rhythm on a page

Based on thoughts and ideas from http://blog.8thlight.com/chris-peak/2012/12/30/vertical-rhythm.html, http://blog.8thlight.com/billy-whited/2011/10/28/r-a-ela-tional-design.html and http://nicewebtype.com/notes/responsive-typography/

Vertical Rhythm is simply when a body of text is aligned to evenly spaced horizontal lines (think of your lined paper from grade school), making it more cohesive and easier to read.

Compare the following two sections:

See the Pen Example of text without explicit line height by Carlos Araya (@caraya) on CodePen

See the Pen Example of text without explicit line height by Carlos Araya (@caraya) on CodePen

Which ones is easier to read and “flows” better?

We will look at what makes text flow with good rhythm, explore the typographical elements that make the flow and rhythm happen and, in the next part, we will build the SCSS, CSS and HTML elements that we need to flow our text successfully.

Rhythm and modular scales

What’s a Modular Scale?

Robert Bringhurst defines this approach to typography is all about:

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

Robert Bringhurst – The Elements of Typographic Style

Tim Brown further clarifies:

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.

Tim Brown – More Modern Typography

It’s fairly easy but until I started looking more systematically at what typography it wasn’t something that even crossed my mind. Yet it is one of the keys to making typography work online and use type as the basis of our online decisions.

Why use a Modular Scale

As Tim Brown suggests:

Recognizing type as the atomic element in web design affords us the opportunity to make better design decisions that resonate upward and outward into the experience. But it also challenges us to eschew conventions like the use of prefabricated frameworks and reusable templates, and to accept a new balance in our schedules—that we put forth greater investment and effort for the sake of more meaningful typography.

Tim Brown – More Meaningful Typography

The modular scale: What I like working with

Before we get started with defining what our rhythm will look like let’s define the scale that we’ll use to create the rhythm. Unless I have a major design reason I always prefer to use 16 pixels as my default font size. It works as it is the default font sizes for most UAs

I picked 24 as my second value to apply to my modular scale generator and the Golden Ratio (1: 1.618) to build my scale. From what I’ve learned the second value is not as important but a secondary reference.

There is a a lot of information about the Golden Ratio as it applies to typography. For general information look at: http://en.wikipedia.org/wiki/Golden_ratio

I built my 16/24 golden ratio scale using Tim Brown’s Modular Scale Generator. Clicking the link below will take you to the generated scale, which you can use on your own projects or modify as needed:

http://modularscale.com/scale/?px1=16&px2=24&ra1=1.618&ra2=0

The advantage of using a scale like the one is that the values are already precalculated for you and most of the values are similar across the columns. This makes our calculations easier

Getting started: Test your theories on a practice page

We have talked a lot about theory; now let’s start putting the theory into practice. We’ll start with creating web specimens that just test the font, we’ll then create additional specimens based on our content and see if the font still holds. We’ll then test our specimens and content on multiple devices (you’ll be surprised at how different the same font looks in different browsers and operating systems and even in different browsers running on your same computer)

Specimens

The web font specimen, discussed in this A List Apart article and available from http://webfontspecimen.com/ allows you to create a professional font specimen of a font of your choice.

As your work with typefaces continues to grow, you’ll find that you have a large list of specimens available. Don’t delete them; put them somewhere on your testing web server (whether it’s hosted online or living in your laptop) as a reference material for future projects.

Please do not reinvent the wheel.

The Frontfriend bookmarklet let you play with fonts without having to customize the page for every single font that you want to test. Using the web font speciment we discussed above we can test fonts without having a page using the actual fonts. We can test with Google web fonts and with our own local fonts.

Samples of your content using the proposed fonts

Take the fonts you’ve chosen and build a portion of your website using them. This will give you one final opportunity to check the fonts in the layout and flow you’ve developed so far… if it doesn’t work then this is a good point to look at alternatives.

Example of a font specimen page

Test on multiple devices

Now that we have specimens and our content built with the fonts we’ve chosen, we test… we test… and we test again and we test in as many devices as we can get our hands on to, either virtual (using tools such as Type Rendering or in actual devices.

In the article Test on real mobile devices without breaking the bank Brad Frost discusses what should be the minimal setup that we need to test in mobile devices in addition to the standard set of browser/operating system combinations for desktop browsers.

It sounds like a lot but it’s a good view of what devices we need to test in but will also depend on your target devices and technologies. Even within the same family of devices, Android for example, look very different depending on the version so we need to test in appropriate devices and versions of the browsers we’ve selected.

Next Steps

Now that we have decided on our fonts, our scale and complementary fonts, if any, we are ready to move into CSS action. We’ll look at building our font stacks, and the different elements of building our typography for the web.

Feedback is always appreciated and encouraged. If you have any suggestions, please leave a comment below or via twitter (@elrond25)

CSS Units of Measurement

Defining Length

According to the W3C:

Lengths refer to distance measurements

The format of a length value (denoted by >length< in this specification) is a number (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

Some properties allow negative length values, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported.

If a negative length value is set on a property that does not allow negative length values, the declaration is ignored.

http://www.w3.org/TR/CSS2/syndata.html#length-units

Absolute length (size) units`

Absolute length units are fixed in relation to each other. They are mainly useful when the output environment is known. Absolute values can be expressed in:

  • in: inches — 1in is equal to 2.54cm.
  • cm: centimeters
  • mm: millimeters
  • pt: points — the points used by CSS are equal to 1/72nd of 1in.
  • pc: picas — 1pc is equal to 12pt.
  • px: pixel units — 1px is equal to 0.75pt.

Or using one of the following pre-defined keywords

  • xx-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Examples of absolute size values

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */

In the example above all elements will retain the assigned measurements, regardless of their parent or surrounding elements measurements.

Absolute size keywords are calculated by the User Agent (browser) and will be slightly different from one to another.

Relative length (size) units

Relative lengths and measurements are based on the computed-style of the current element. The only exception is font-size where the size is calculated based on the parent element

According to W3C:

Relative length units specify a length relative to another length property. Style sheets that use relative units can more easily scale from one output environment to another.

cite=”http://www.w3.org/TR/CSS2/syndata.html”

Relative units defined in CSS2 and CSS3

  • em: the ‘font-size’ of the relevant font
  • rem (root em): calculated based on the font-size of the root element
  • ex: the ‘x-height’ of the relevant font
  • percentages: a fraction of the parent element’s measurement

Any of the predefined keywords:

  • Larger
  • Smaller

Examples using em, ex and percentages

h1 { margin: 0.5em; }      /* em */
h1 { margin: 1ex; }        /* ex */
h1 { margin: 125%; }       /* percentage */ 

Examples using rem

html { font-size: 16px /* to make the example clearer */ } 
body { font-size: 1.5rem; } /* =24px */
h1   { font-size: 2.5rem; } /* =40px */

CSS paged media

In paged media the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages, Microsoft Word documents, Adobe PDF (portable document format) files among others

This needs to be tested with modern browsers. As far as I know this is only supported on Chrome and, maybe, Firefox

I am currently working on a sample page and associated stylesheet to test the concept and see how well it works. See the bottom of this post for more information

We no longer need to convert our documents into PDF or Word in order to print them. Using paged media and good layout and typography there is no reason not to expect high quality print results from our web content.

This is not a widely supported technology in browsers but it’s getting there and, when it does, it’ll make HTML an even better format to publish content.

There are formatters; programs that will take an HTML file and the style sheet and output a file suitable for printing. Some of the formatters include:

This is not quite the ideal I had in mind when I first started looking at Paged Media but until browser support gets better than it may just have to do.

Before we jump in to the code, there’s one great article from A List Apart that covers book making with CSS: Building books with CSS

Defining Pages: the @page rule

CSS defines a “page box”, a box of finite dimensions where content is rendered. It is formed by two areas:

  • The page area: The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for layout that occurs between page breaks.
  • The margin area: which surrounds the page area.

You can specify the dimensions, orientation, margins, etc. of a page box within an @page rule. The dimensions of the page box are set with the ‘size’ property. The dimensions of the page area are the dimensions of the page box minus the margin area.

For example, the following @page rule sets the page box size to 8.5 x 11 inches and creates ‘1in’ margin on all sides between the page box edge and the page area:

<style tyle="text/css">
<!--
@page { size:8.5in 11in; margin: 1in; }
-->
</style>

You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page same as you would for your regular CSS rules.

Setting Page Size:

The size property specifies the size and orientation of a page box. There are four values which can be used for page size:

  • auto: Same as the target paper size.
  • landscape: Vertical layout, larger side of the page are left and right
  • portrait: Horizontal layout, larger sides of the pare are top and bottom
  • length: Length values for the ‘size’ property create an absolute page box. Values are entered manually.

We’ll concentrate in length for this document. Once we’ve done some testing we will go back to how the auto, portrait and landscape value interact with the other parameters set up on the stylesheet

The example belows explicitly says the dimensions of the page to 8.5in by 11in. The pages created from the example requires paper that is 8.5″x11″ or larger.

<style tyle="text/css">
<!--
@page {
  size: 8.5in 11in;  /* width height */
}
-->
</style>

Once you create a named page layout, you can use it in your document by adding the page property to a style that is later applied to an element in your document. For example, this style renders all the tables in your document on landscape pages:

<style tyle="text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>

If the browser encounters a <table> element in your document and the current page layout is the default portrait layout, it will print the table in a new landscape page.

Left, right, and first pages:

When printing double-sided documents, the page boxes on left and right pages should be different. This can be expressed through two CSS pseudo-classes below:

<style tyle="text/css">
@page :first {
  size: 8.5in 11in;
}
@page :left {
  margin-left: 2.5in;
  margin-right: 1in;
}

@page :right {
  margin-left: 1in;
  margin-right: 2.5in;
}
</style>

The margins are mirror opposites from each other. When printed the pages will acommodate the margins for binding by providing additional space on the spine side.

The first page has it’s own pseudo class. Using the :first attribute we can style our first page independently from the rest of our content and make our first or title page look different like we do in the example below:

<style tyle="text/css">
<!--
@page { 
  margin: 1in /* All margins set to 2cm */
} 

@page :first {
  margin-top: 4in    /* Top margin on first page 10cm */
}
-->
</style>

Controlling pagination

Unless you specify otherwise, a page break only happens when there is a change in the page format or when the content fills the current page. To force or suppress page breaks, use the page-break-before, pagebreak-after, and page-break-inside properties.

Keywords for both page-break-before and page-break-after properties are: auto, always, avoid, left, and right.

The keyword auto is the default, it generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.

Suppose your document has level-1 headers start new chapters, with sections denoted by level-2 headers. We will start chapters on a new, right-hand page, but don’t want section headers to be split across a page break from the subsequent content. You can achieve this using following rule:

<style tyle="text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>

Use only the auto and avoid keywords with the page-break-inside property. To prevent tables from being broken accross pages, if possible, you would use the following rule:

<style tyle="text/css">
<!--
table { page-break-inside : avoid }
-->
</style>

Controlling widows and orphans:

Widow
A paragraph-ending line that falls at the beginning of the following page/column, thus separated from the rest of the text.

Orphan
A paragraph-opening line that appears by itself at the bottom of a page/column.

A word, part of a word, or very short line that appears by itself at the end of a paragraph. Orphans result in too much white space between paragraphs or at the bottom of a page.

From Wikipedia

Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.

  • The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
  • The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.

Here is the example to create 4 lines at the bottom and 3 lines at the top of each page:

<style tyle="text/css">
@page{
  orphans:4; 
  widows:2;
}
</style>

Initial stab at paged media stylesheet

See the test stylesheet for a possible way to make this work and the HTML document I’m using to experiment with the technology.

Expressing colors in CSS

As part of my research in Web Typography I got reacquainted with the many ways you can express colors in CSS. This was originally in my typography document but I think it’s better if I move it out to prevent an already long document from becoming unmanageable.

sRGB colors (3 or 6 digits)

This was what I always associted with colors in CSS and until not too long ago it was the only way to express colors. You can use either syntax but, as you can see in the example below, the 6 digit syntax allows for more precision in defining your colors.

The three definitions of a div container express the same color.

div {
  color: #0f0;   // The color 'lime' defined using the 3-digit hexadecimal notation
}

div {
  color: #00ff00; // The color 'lime' defined using the 6-digit hexadecimal notation
}

div {
  color: rgb(0, 255, 0) // The color 'lime' expressed with RGB notation
}

RGBa colors

This should be run behind a modernizr test as it’s not widely supported

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.

With RGBa, we can make a box transparent and leave its descendants alone

div {
   background: rgba(200, 54, 54, 0.5); 
}

Declaring a fallback color

Not all browsers support RGBa, so if the design permits, you should declare a “fallback” color. This color will be most likely be solid (fully opaque). Not declaring a fallback means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5); 
}

Table below taken from the Mozilla Documentation Project. Credited according to a Creative Common Attribution-Share Alike License

Color keywords

Color keywords are case-insensitive identifiers which represent a specific color, e.g. red, blue, brown, lightseagreen. The name describes the color, though it is mostly artificial. The list of accepted values varied a lot through the different specification:

  • CSS Level 1 only accepted 16 basic colors, named the VGA colors as they were taken from the set of displayable colors on VGA graphic cards
  • CSS Level 2 added the orange keyword
  • From the beginning, browsers accepted other colors, mostly the X11 named colors list as some early browsers were X11 applications, though with a few differences. SVG 1.0 was the first standard to formally define these keywords; CSS Colors Level 3 also formally defined these keywords. They are often referred as the extended color keywords, the X11 colors, the SVG colors

There are a few caveats to consider when using keywords:

  • Except the 16 basic colors which are common with HTML, the others cannot be used in HTML. HTML will convert these unknown values with a specific algorithm which will lead to completely different colors. These keywords should only be used in SVG & CSS
  • Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.
  • No keyword-defined colors in CSS have any transparency, they are plain, solid colors.
  • Several keywords denote the same colors:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategray
  • Though the names of the keywords have been taken by the usual X11 color names, the color may diverge from the corresponding system color on X11 system as these are tailored for the specific hardware by the manufacturer .
Specifications Color Keyword RGB cubic coordinates Live Example
CSS3 CSS2 CSS1   black rgb(  0,   0,   0)  
  silver rgb(192, 192, 192)  
  gray[*] rgb(128, 128, 128)  
  white rgb(255, 255, 255)  
  maroon rgb(128,   0,   0)  
  red rgb(255,   0,   0)  
  purple rgb(128,   0, 128)  
  fuchsia rgb(255,   0, 255)  
  green rgb(  0, 128,   0)  
  lime rgb(  0, 255,   0)  
  olive rgb(128, 128,   0)  
  yellow rgb(255, 255,   0)  
  navy rgb(  0,   0, 128)  
  blue rgb(  0,   0, 255)  
  teal rgb(  0, 128, 128)  
  aqua rgb(  0, 255, 255)  
    orange rgb(255, 165,   0)  
    aliceblue rgb(240, 248, 255)  
  antiquewhite rgb(250, 235, 215)  
  aquamarine rgb(127, 255, 212)  
  azure rgb(240, 255, 255)  
  beige rgb(245, 245, 220)  
  bisque rgb(255, 228, 196)  
  blanchedalmond rgb(255, 235, 205)  
  blueviolet rgb(138,  43, 226)  
  brown rgb(165,  42,  42)  
  burlywood rgb(222, 184, 135)  
  cadetblue rgb( 95, 158, 160)  
  chartreuse rgb(127, 255,   0)  
  chocolate rgb(210, 105,  30)  
  coral rgb(255, 127,  80)  
  cornflowerblue rgb(100, 149, 237)  
  cornsilk rgb(255, 248, 220)  
  crimson rgb(220,  20,  60)  
  darkblue rgb(  0,   0, 139)  
  darkcyan rgb(  0, 139, 139)  
  darkgoldenrod rgb(184, 134,  11)  
  darkgray[*] rgb(169, 169, 169)  
  darkgreen rgb(  0, 100,   0)  
  darkgrey[*] rgb(169, 169, 169)  
  darkkhaki rgb(189, 183, 107)  
  darkmagenta rgb(139,   0, 139)  
  darkolivegreen rgb( 85, 107,  47)  
  darkorange rgb(255, 140,   0)  
  darkorchid rgb(153,  50, 204)  
  darkred rgb(139,   0,   0)  
  darksalmon rgb(233, 150, 122)  
  darkseagreen rgb(143, 188, 143)  
  darkslateblue rgb( 72,  61, 139)  
  darkslategray[*] rgb( 47,  79,  79)  
  darkslategrey[*] rgb( 47,  79,  79)  
  darkturquoise rgb(  0, 206, 209)  
  darkviolet rgb(148,   0, 211)  
  deeppink rgb(255,  20, 147)  
  deepskyblue rgb(  0, 191, 255)  
  dimgray[*] rgb(105, 105, 105)  
  dimgrey[*] rgb(105, 105, 105)  
  dodgerblue rgb( 30, 144, 255)  
  firebrick rgb(178,  34,  34)  
  floralwhite rgb(255, 250, 240)  
  forestgreen rgb( 34, 139,  34)  
  gainsboro rgb(220, 220, 220)  
  ghostwhite rgb(248, 248, 255)  
  gold rgb(255, 215,   0)  
  goldenrod rgb(218, 165,  32)  
  greenyellow rgb(173, 255,  47)  
  grey rgb(128, 128, 128)  
  honeydew rgb(240, 255, 240)  
  hotpink rgb(255, 105, 180)  
  indianred rgb(205,  92,  92)  
  indigo rgb( 75,   0, 130)  
  ivory rgb(255, 255, 240)  
  khaki rgb(240, 230, 140)  
  lavender rgb(230, 230, 250)  
  lavenderblush rgb(255, 240, 245)  
  lawngreen rgb(124, 252, 0)  
  lemonchiffon rgb(255, 250, 205)  
  lightblue rgb(173, 216, 230)  
  lightcoral rgb(240, 128, 128)  
  lightcyan rgb(224, 255, 255)  
  lightgoldenrodyellow rgb(250, 250, 210)  
  lightgray[*] rgb(211, 211, 211)  
  lightgreen rgb(144, 238, 144)  
  lightgrey[*] rgb(211, 211, 211)  
  lightpink rgb(255, 182, 193)  
  lightsalmon rgb(255, 160, 122)  
  lightseagreen rgb( 32, 178, 170)  
  lightskyblue rgb(135, 206, 250)  
  lightslategray[*] rgb(119, 136, 153)  
  lightslategrey[*] rgb(119, 136, 153)  
  lightsteelblue rgb(176, 196, 222)  
  lightyellow rgb(255, 255, 224)  
  limegreen rgb( 50, 205,  50)  
  linen rgb(250, 240, 230)  
  mediumaquamarine rgb(102, 205, 170)  
  mediumblue rgb(  0,   0, 205)  
  mediumorchid rgb(186,  85, 211)  
  mediumpurple rgb(147, 112, 219)  
  mediumseagreen rgb( 60, 179, 113)  
  mediumslateblue rgb(123, 104, 238)  
  mediumspringgreen rgb(  0, 250, 154)  
  mediumturquoise rgb( 72, 209, 204)  
  mediumvioletred rgb(199,  21, 133)  
  midnightblue rgb( 25,  25, 112)  
  mintcream rgb(245, 255, 250)  
  mistyrose rgb(255, 228, 225)  
  moccasin rgb(255, 228, 181)  
  navajowhite rgb(255, 222, 173)  
  oldlace rgb(253, 245, 230)  
  olivedrab rgb(107, 142,  35)  
  orangered rgb(255,  69,   0)  
  orchid rgb(218, 112, 214)  
  palegoldenrod rgb(238, 232, 170)  
  palegreen rgb(152, 251, 152)  
  paleturquoise rgb(175, 238, 238)  
  palevioletred rgb(219, 112, 147)  
  papayawhip rgb(255, 239, 213)  
  peachpuff rgb(255, 218, 185)  
  peru rgb(205, 133,  63)  
  pink rgb(255, 192, 203)  
  plum rgb(221, 160, 221)  
  powderblue rgb(176, 224, 230)  
  rosybrown rgb(188, 143, 143)  
  royalblue rgb( 65, 105, 225)  
  saddlebrown rgb(139,  69,  19)  
  salmon rgb(250, 128, 114)  
  sandybrown rgb(244, 164,  96)  
  seagreen rgb( 46, 139,  87)  
  seashell rgb(255, 245, 238)  
  sienna rgb(160,  82,  45)  
  skyblue rgb(135, 206, 235)  
  slateblue rgb(106,  90, 205)  
  slategray[*] rgb(112, 128, 144)  
  slategrey[*] rgb(112, 128, 144)  
  snow rgb(255, 250, 250)  
  springgreen rgb(  0, 255, 127)  
  steelblue rgb( 70, 130, 180)  
  tan rgb(210, 180, 140)  
  thistle rgb(216, 191, 216)  
  tomato rgb(255,  99,  71)  
  turquoise rgb( 64, 224, 208)  
  violet rgb(238, 130, 238)  
  wheat rgb(245, 222, 179)  
  whitesmoke rgb(245, 245, 245)  
  yellowgreen rgb(154, 205,  50)  

[*] The ‘e’-grey colors (with an e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) are only supported since IE 8.0. IE 3 to IE 6 only support the ‘a’ variants: gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

See the Mozilla Documentation Project CSS Color page for more information.

HSLa colors

This needs to be used behind a modernizr test, it is not fully supported

Using HSLa is similar to RGBa in that you declare three values determining the color and then a fourth value for its transparency level. You can read more about browser support below, but it’s basically any browser that supports rgba supports hsla too.

#some-element {
   background-color: hsla(170, 50%, 45%, 1);
}
  • Hue Think of a color wheel. Around 0o and 360o are reds 120o are greens, 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360
  • Saturation 0% is grayscale. 100% is fully saturated (full color)
  • Lightness 0% is completely dark (black). 100% is completely light (white). 50% is average lightness
  • alpha Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.