Join the infusion-users mailing list and ask your questions there.
Overview
This walk-through accompanies the FSS: Text Functional Demo in describing how to use the Text functionality of the Fluid Skinning System (FSS). It is written under the assumption that readers have reviewed the Fluid Skinning System (FSS) introductory article and understand what the FSS is.
Learn how to customize FSS Text classes and override values with the Overriding FSS article.
For more information about the walk-throughs in general, links to functional demos and FSS style sheets, please refer to FSS - Getting Started.
Before continuing with this article, it is highly recommended that you glance over the following walk-throughs as they explain certain concepts in detail:
- FSS - Layout to give you an overview of how layout in the FSS works.
- FSS Walk-through - Advanced Layout to take FSS Layout further, from simple containers to Widgets and GUI systems.
- FSS Walk-through - Colors and Themes to see how FSS can give a nice, out-of-the-box design for FSS Widgets and GUI systems.
Incorporating the Style Sheet
In order to use the FSS Text class names, you will need to include the following files in the <head> of your document:
fss-text.css
All FSS class names use the fl- prefix. In our demos, if you see other class names without this prefix they are either: complimentary CSS; overriding CSS; or specific extensions of the FSS CSS. This means if you don't like the way a certain class names behaves you could easily override or extend them.
A note on semantics
The CSS spec has not entirely respected the existing naming conventions used by the print industry. As such, we've tried to use the simplest semantics possible in our class names.
Font Face/Family
Examples in the Text Functional Demo show what common fonts are available in the FSS. For the first four examples, a class to indicate what font family to use is not included, so the text reverts back to the default sans-serif font family specified in the reset file: Arial, Helvetica, Clean, and Sans-serif. The last example includes fl-font-times, which brings in the fonts: Georgia, Times, Times New Roman, and Serif.
The complete list of FSS font-family class names and their fonts are as follows:
fl-font-serif - Georgia, Times, Times New Roman, Book Antiqua, serif
fl-font-sans - Tahoma, Verdana, Helvetica, sans-serif
fl-font-monospace - Courier New, Courier, monospace
fl-font-arial - Arial
fl-font-verdana - Verdana
fl-font-times - Georgia, Times, Times New Roman, serif
fl-font-courier - Courier New, Courier, monospace
Font Size and Line height
Variation of text sizes and distances between lines are clearly displayed in the examples. If no classes are used, as is the case with the first example, the text is set to the default size of 13px with a line height of 1.231em. The classes fl-font-size-70, fl-font-size-120, fl-font-size-80, and fl-font-size-100 respectively sets the text to sizes 0.7em, 1.2em, 0.8em, and 1.2em, and allows 1em, 1.5em, 1.1em, and 1.3em of spacing between the lines.
FSS provides the following font sizes and corresponding line heights:
fl-font-size-70 - font-size: 0.7em ; line-height:1em
fl-font-size-80 - font-size: 0.8em ; line-height:1.1em
fl-font-size-90 - font-size: 0.9em ; line-height:1.2em
fl-font-size-100 - font-size: 1em ; line-height:1.3em
fl-font-size-110 - font-size: 1.1em ; line-height:1.4em
fl-font-size-120 - font-size: 1.2em ; line-height:1.5em
fl-font-size-130 - font-size: 1.3em ; line-height:1.6em
fl-font-size-140 - font-size: 1.4em ; line-height:1.7em
fl-font-size-150 - font-size: 1.5em ; line-height:1.8em
Letter-spacing/Tracking
Spacing between letters can also be specified. The fourth example uses the class fl-font-spacing-3, which creates spaces of 0.3em between each letter.
FSS provides the following letter-spacing class names:
fl-font-spacing-0 - 0em
fl-font-spacing-1 - 0.1em
fl-font-spacing-2 - 0.2em
fl-font-spacing-3 - 0.3em
fl-font-spacing-4 - 0.4em
fl-font-spacing-5 - 0.5em
fl-font-spacing-6 - 0.6em