W3.CSS Succinctly®
CHAPTER 7
Text
The default font family in the W3.CSS framework is Verdana, sans-serif, with a font size of 15 pixels. It also has a default line spacing of 1.5, which produces webpages that are easy to read for most users. The font is set on the HTML and body tags, which means it will be used for all elements on the site, unless specifically changed.
The H1 through H6 header sizes use the font family of Segoe UI, Arial, sans-serif.
Note: A serif font (such as Times Roman or Georgia) has little decorative strokes on the end of the letters, while a sans serif font (such as Helvetica or Arial) does not have these strokes. The font family tells the browser to try each font in the list, and if not found, just choose any font that most closely matches the last item in the family. W3.CSS suggests Verdana, and if not found, asks the browser to use a sans-serif font.
CSS fonts
You could easily override the Verdana font by adding a font family to your HTML and body elements after the W3.CSS file is loaded, for example.
Code Listing 27
<link rel="stylesheet" href="css/w3.css"> <link rel="stylesheet" href="clientStyle.css"> |
Where the file clientStyle.css contains a line similar to the following.
Code Listing 28
html, body { font-family: "Georgia", sans-serif; } |
You could modify the W3.CSS file as well, but I would advise you to put your unique settings into a separate style sheet, rather than risk losing them if you download a W3.CSS update.
Print style
Verdana is a good, flexible font, but you might want to choose a different font for printing. The following code snippet shows a media query to change the printed font to an alternative font.
Code Listing 29
@media print { html, body { font-family: Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Century Gothic", Helvetica, sans-serif; } } |
Web fonts
When a browser chooses a font, it relies on the fonts that are installed on the user’s computer. However, CSS allows you to use fonts that are available at a web location, rather than the user’s computer. These are referred to as web fonts.
A popular source of web fonts is the Google Fonts library. This site contains hundreds of web fonts you can use to improve your website’s appearance.
Installing the font
To use a web font, you will need to install it into your webpage. For example, the Tangerine Google font could be added via the following code placed in the <head> section of the website.
Code Listing 30
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> |
This will add a new font called Tangerine to your site. Tangerine is a script font, so you could create a class to use when displaying signatures.
Code Listing 31
.SignatureLine { font-family: Tangerine, script, serif; } |
Be sure to include a default font in case the requested font is not loaded for any reason. Also, keep in mind that the font file needs to be loaded when the page starts, which can slow down the startup time.
Alignment
There are three classes you can use to align text (and other elements) horizontally within a container. These classes are:
- w3-left-align: Aligns text to the left.
- w3-right-align: Aligns text to the right.
- w3-center: Centers text within the container.
Text features
You can change the appearance of your text a bit by using a couple of additional classes with the framework. These classes allow you to widen the text or set the opacity. For example, the following code snippet adds 4 pixels of spacing between the characters in the text.
<p class="w3-wide">On sale today only!</p>
The w3-opacity class sets the opacity of the element to 60 percent. The opacity value determines how translucent the text is. The smaller the number, the more translucent the element appears. The following figure shows how you can use the opacity class to display an error message, but still let the user see the screen beneath the error message.
Figure 25: Opacity example
You can also use the w3-opacity-max class to set the opacity to 25 percent, and the w3-opacity-min class to set the level to 75 percent. The w3-opacity-off class will set the opacity to 100 percent (i.e. totally opaque).
Tip: Opacity can be used when you are loading content via Ajax. Set the class to w3-opacity-max during the before Send event, and set the class to w3-opacity-off during the complete event. This will provide a visual indication to the user that a portion of the screen has been updated.
CSS code
If you want to display some sort of code, such as programming code or computer instructions, you can use the w3-code class.
Code Listing 32
<div class="w3-code" translate="no"> function DisplayError(msg)<br/> {<br/> alert(msg);<br/> }<br/> </div> |
Note: Translate="no" is an HTML5 attribute indicating the following content should not be translated to other languages.
The default font families for code are Consolas and Courier New.
- 1800+ high-performance UI components.
- Includes popular controls such as Grid, Chart, Scheduler, and more.
- 24x5 unlimited support by developers.