CSS-3 Font Properties

WARNING

This article shamelessly uses 12MBytes of fonts in its presentation. You should have a browser that can render OTF, TTF and WOFF fonts, and that supports CSS font features. This means FF8+, GC18+, AS5.2+(Win), IE9+

Introduction

Fonts for the Internet and more specifically ePub3 and advanced HTML5/CSS-3 digital content have been given a minor poke forward with the release of the SIL licensed Adobe Source Sans Pro font family on the 2nd August 2012.

The font-design is of course craftsman-like. The important point is there are 12 fonts with six font-weights. This allows the CSS-3 font-weight properties to be seriously explored, demonstrated and used. Maybe they will add a couple of stretch font-faces sometime in the future to make it really interesting.

Few book/document designers have experienced how powerful and easy CSS-3 font features are to use compared to the desktop typesetting programs. This article attempts to provide a little enlightenment.

Infogrid Pacific has familiarity with the advanced aspects of fonts in ePub because we are often asked to produce highly designed books with sophisticated font use delivered in AZARDI. It is luxurious not to have to drop design considerations to the lowest reading system capabilities.

IGP:Digital Publisher has extensive support for OTF/TTF Fonts mapped to CSS-3 font properties for both print and optionally e-book/ePub presentation. Used well they radically simplify documents that need complex font design and application from a CSS editing environment. It is considerably easier to handle fonts from a capable CSS environment than from any desktop application, and the steepness of the learning curve is reduced.  

This article demonstrates the advantages of using advanced CSS-3 for mapping multiple font-faces to a font family, and the sort of tagging strategies and options that are available.

With thanks to....

OTF fonts are wonderful; with the limitation that there are no/few clear usage rights for commerical fonts in digital content products such as ePub3 packages as yet. Finding, testing and using appropriate SIL Open License fonts is important to allow ePubs to be created in all languages everywhere.

To illustrated the general characteristics and benefits of using CSS-3 fonts properties benefits of OTF Font Features, this article uses:

Linux Libertine | Linux Biolinium. (Philipp H. Poll) This is an elegant open source OTF font with a very strong focus on all European languages. It is a very, very large font with an unmatched set of multi-language font-features. It is the font used for the Wikipedia logo. It is SIL licensed.

MEgalopolis Extra.  (Jack Usine - SMeltery) A display font that allows the demonstration of a wide number of font-features in a very graphical way. It's a good-fun font and useful for learning about font-features. It is licensed for use with credits and links to the SMeltery site.

Source-Sans Pro (Paul D Hunt - Adobe) A font with an excellent set of font-weights and the standard Adobe level of European language support. It is SIL licensed.

Liberation (Copyright RedHat) This is the font used on this article page. It is available in serif, serif-narrow, sans serif, sans-serif-narrow and monospaced version. It has excellent language coverage. Released under a GPL+exception license.

The Reference section at the end of the article has credit and download information for all of these fonts.

EPub3, CSS-3 and Fonts

The ePub3 specification supports OTF and WOFF fonts - but not TTF fonts. WOFF font conversion is not hard, and standard TTF fonts can be easily transformed to WOFF for use in an ePub3 package. Of course WOFF fonts are unlikely to work on any current ePub2 readers (they do work in AZARDI), so this discussion is forward looking; as it should be!

Anyone who has worked with fonts for browsers for even a short time know that fonts are described differently in CSS than they are in desktop applications where they are generally just called fonts.

CSS introduces the defining terms:

Font-face. A specific font with a defined set of characters and distinctive weight, style, stretch or variant properties.

Font-family. An associated set of font-faces each with separate weight, style, stretch and variant properties defined into a single family group.

These have been around for a long time, but with CSS-3 they get a major overhaul.

Weight, Style and Stretch

CSS-3 defines:

• nine font-weights (including normal)
• eight options for font-stretch (excluding normal)
• two options for font styles ( Italic and oblique can be considered synonyms so the two styles are normal and Italic/oblique.)

That is a combination of 9 x 9 x 2 = 162 possible font-faces based on the way fonts are created today. And that doesn't include Small-caps and other variants!

The CSS-3 font weight Properties

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: normal;

The CSS-3 font stretch Properties

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: narrower;
font-stretch: wider;

The font Style Properties

font-style: italic; 
font-style: oblique;
font-style: normal; 

That leaves the font-variant property orphaned. While font-variant has valiantly carried small-caps as it's lone property value for many years, it is about to be turned into a monster with font-features. Small-caps have been synthesised by rendering engines up until recently. Now "real" font-sources small-caps are easy!

Small-caps can be both a font-feature and a font-face. This has to be understood on a font by font basis. Most legacy fonts produce small-caps as a different set of fonts, which need to be explicitly handled with a @font-face declaration, newer OTF fonts have Small-Caps included in the font features. This is illustrated in the Linux Libertine demonstration set.

Of course the debate of the value of small-caps in digital content has yet to rage. Small-Caps were valuable as a visual discrimination tool to impart certain value and meaning to text in the mono-black world of print. In the world of digital content it is easy to apply so many more discriminating styles and colours. Perhaps small-caps have little communication value in digital content, except of course that they are cute little things!

IGP:Font Manager 2 Font Map

IGP:Font Manager 2 is a full CSS-3 font manager that enables full and correct CSS property mapping to font-faces. It directly creates CSS-3 font-family packages based on any production requirement.

<div>
    <p class="bodytext2-rw">Word 
        <span class="bodytext3-rw">word</span> 
    word word word</p>
</div>

Introducing the Fonts

Please see the References section at the bottom of this article for more information on each of these fonts, how to download them and obtain more information.

MEgalopolis

This is MEgalopolis. A great show-off OTF font with a wonderful set of alternative glyphs.

This is a single weight font so including it in your font list is straight-forward. MEgopolis is an interesting font because of the extremist nature of it's font-features and glyph options.

Linux Libertine

This is a powerful suite of fonts. Excellent for print, and useful for digital content presentation where subtlety and cost are both considerations. It is available with six font-weights and also has a nice set of support fonts for Small-Caps even though each font-face has capitals in the font-features. Then there is the cute Initials font seen as a drop-cap at the beginning of this paragraph.

Linux Libertine is interesting because of its strengths for multiple language typesetting and online presentation and its exceptional European language support. If there is a downside to Linux Libertine it is the 300KB per font-face file size.

It is also available in a "G" variant supporting the SIL Graphite project. The Graphite project has rendering subtleties that go beyond OTF, but that is another article.

Linux Libertine Regular

Linux Libertine Regular Small-Caps FROM CAPITALS (C2SC)

Linux Libertine Regular Small-Caps

Linux Libertine Italic

Linux Libertine Bold

Linux Libertine Bold Italic

LL INITIALS

Linux Biolinium

Biolinum is designed for emphasis, e.g. of titles.

Linux Biolinium Regular

Linux Biolinium Bold

Linux Biolinium Italic

Linux Biolinium Small Caps (Font-face not font-feature)

Adobe Source Sans

Adobe Source-Sans is interesting because it is Adobe's first open source font and for the number of font-weights it supports. This allows the exploration of CSS-3 font properties. Here are the font-faces organized by weight:

The CSS

Here is the Source Sans Pro CSS Mapping used in this article. They have all been mapped to font-family Bodytext3, a predefined option in IGP:Digital Publisher.

/* Source Sans Pro */
/* Source Sans Pro Black */
@font-face {
    font-family: "Bodytext3";
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-Black.otf');
}
/* Source Sans Pro Black Italic */
@font-face {
    font-family: "Bodytext3";
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-BlackIt.otf');
}
/* Source Sans Pro Bold */
@font-face {
    font-family: "Bodytext3";
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-Bold.otf');
}
/* Source Sans Pro Bold Italic */
@font-face {
    font-family: "Bodytext3";
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-BoldIt.otf');
}
/* Source Sans Pro Semibold Italic */
@font-face {
    font-family: "Bodytext3";
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-SemiboldIt.otf');
}
/* Source Sans Pro Semibold */
@font-face {
    font-family: "Bodytext3";
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-Semibold.otf');
}
/* Source Sans Pro */
@font-face {
    font-family: "Bodytext3";
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-Regular.otf');
}
/* Source Sans Pro Italic */
@font-face {
    font-family: "Bodytext3";
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-It.otf');
}
/* Source Sans Pro Light */
@font-face {
    font-family: "Bodytext3";
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-Light.otf');
}
/* Source Sans Pro Light Italic */
@font-face {
    font-family: "Bodytext3";
    font-weight: 300;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-LightIt.otf');
}
/* Source Sans Pro ExtraLight */
@font-face {
    font-family: "Bodytext3";
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-ExtraLight.otf');
}
/* Source Sans Pro ExtraLight Italic */
@font-face {
    font-family: "Bodytext3";
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
    font-variant: normal;
    src: url('/fmfonts/business/SourceSansPro-ExtraLightIt.otf');
}

OK so how is this applied to an HTML block, paragraph or inline selection in our digital content? We need a nice little set of class statements to help the rendering engine select the correct font where we want it.

In IGP:Digital Publisher font selectors are defined for you with this relatively small list of predefined class statements covering the current CSS-3 font-properties range. The selectors are available for insertion into any HTML element.

/*Font Weight Properties*/
.font-thin-rw {font-weight: 100;}
.font-extra-light-rw {font-weight: 200;}
.font-light-rw {font-weight: 300;}
.font-weight-normal-rw {font-weight: 400;}
.font-medium-rw {font-weight: 500;}
.font-semi-bold-rw {font-weight: 600;}
.font-bold-rw {font-weight: 700;}
.font-extra-bold-rw {font-weight: 800;}
.font-black-rw {font-weight: 900;}
/*Font Stretch Properties*/
.font-ultra-condensed-rw {font-stretch: ultra-condensed;}
.font-extra-condensed-rw {font-stretch: extra-condensed;}
.font-semi-condensed-rw {font-stretch: semi-condensed;}
.font-condensed-rw {font-stretch: condensed;}
.font-semi-expanded-rw {font-stretch: semi-expanded;}
.font-expanded-rw {font-stretch: expanded;}
.font-extra-expanded-rw {font-stretch: extra-expanded;}
.font-ultra-expanded-rw  {font-stretch: ultra-expanded;}
/*Font Style Properties*/
.oblique-rw {font-style: oblique;}
.italic-rw {font-style: italic;}

Note: font-variant isn't on this list as it is going through a major refactoring to handle font-features.

These style can be applied in any combination to any text. So depending on the power of your CSS tools this is easier or more difficult (hand-tagging). Here is an example of the HTML used in this article to show the 12 different font-faces above:

<p class="bodytext3-rw font-extra-light-rw">Source Sans Pro ExtraLight</p>
<p class="bodytext3-rw font-extra-light-rw italic-rw">Source Sans Pro ExtraLight Italic</p>
<p class="bodytext3-rw font-light-rw">Source Sans Pro Light</p>
<p class="bodytext3-rw font-light-rw italic-rw">Source Sans Pro Light Italic</p>
<p class="bodytext3-rw font-weigh-normal-rw">Source Sans Pro Regular</p>
<p class="bodytext3-rw italic-rw">Source Sans Pro Italic</p>
<p class="bodytext3-rw font-semibold-rw">Source Sans Pro Semibold</p>
<p class="bodytext3-rw font-semibold-rw italic-rw">Source Sans Pro Semibold Italic</p>
<p class="bodytext3-rw bold-rw"><em>Source Sans Pro Bold</em></p>
<p class="bodytext3-rw bold-rw italic-rw">Source Sans Pro Bold Italic</p>
<p class="bodytext3-rw font-black-rw">Source Sans Pro Black</p>
<p class="bodytext3-rw font-black-rw italic-rw">Source Sans Pro Black Italic</p>

The font-family is defined to bodytext3-rw. It will default to the regular font. There is no addition of bold or italic tags. These can be used, but must be used correctly to prevent generated styles.

In this example the class statements are applied to <p>. This can equally easily be applied to <section>, <div>, <span>, <ul>, <ol>, any other element and any other appropriate CSS class statement.

In IGP:Digital Publisher and IGP:FoundationXHTML the application of font properties is separate from structural and semantic CSS classes to ensure both XHTML flexibility now and future usefulness. This approach also empowers the use of Design Profiles so the same XHTML can be used to create multiple editions and formats each with their own Font Scheme and font CSS properties applied.

Summary

OTF fonts and the supported font-features open up new design opportunities for digital content. There is no longer any need to make apologies and excuses for fonts in browsers or e-book readers.

CSS-3 used with a bit of thought and planning in a production system makes it relatively trivial to start using extended font-family definitions and font-features without impact on XHTML structure, semantics and other defined attributes.

If a reading system or browser cannot understand them it will gracefully drop back to default styles, or no styles. Because of the nature of the CSS-3 specification the

It takes a little time to get used to the new syntax and how it should be used to make the application of production design decisions easy. The requirements are:

• The fonts must exist
• The fonts must be CSS mapped to the correct styles
• You must be able to access and understand what font-features are available in a font.
• Your tools must allow the application of font styles and font features.

It yet remains to be seen how many of these features are supported in various ePub and other reading systems as they are launched.

The good news is if you are developing and producing for closed-channel content delivery such as we do with AZARDI for education and learning institutions, you owe it to your readers and yourself to give CSS-3 and OTF fonts a real shot. It really makes a difference. Once you are past the frustrating setting up stage, it is probably even fun!

Notes

References and Credits