Great CSS Techniques to Enhance Web Typography




We all have our techniques for obtaining a great combination of readability and design. Many designers like to fine-tune the font stacks and sometimes add a nice shadow to bring text to life.

Others like to take typography to a different level and use anti-aliasing tools and such to get a sharp clean result. Whichever method you decide upon, there are some great CSS techniques to enhance web typography without running the whole nine miles.

With that said, we discuss several techniques to obtaining great results for typography using some rather easy methods.

Pseudo Elements

Pseudo Elements

CSS has many great pseudo elements that can help obtain many effects or styles without spending the time trying to figure out how to do it otherwise.

For example, the first-letter pseudo-element gives you the ability to modify the properties of the first letter of a character group. If for example you decide you want the first letter of each of your paragraphs to be in bold, larger, or a different font face, you can easily achieve it by using the first-letter pseudo-element without any additional work.

Below, is a code example of implementing the first-letter element to the HTML paragraph element or tag.

p:first-letter {
display:block;
float:left;
font-size: 80px;
color: #c9c9c9;
}

Other pseudo elements include first-line, before, and after. The first-line element is similar to the first-letter pseudo-element. It performs exactly the same function; however, instead of just applying the properties to the first letter, it adds it to the first line. For example, instead of bolding the first letter of a paragraph, you can bold the first sentence, which can help emphasize the statement.

Font Stacks

Font stacks are definitely very important to providing fonts that look and fit well with your design. If you do not know already, font stacks are used as fallback mechanisms when an operating system does not have the preferred font installed.

For instance, if the preferred font for your website’s design is Verdana, and a visitor’s operating system does not support the font or does not have it installed, the browser will fall back to its default font face unless otherwise specified. With that said, use font stacks to better control the appearance of your website’s typography so that your website’s visitors will not see major typography changes from operating system to operating system.

One common mistake made when creating font stacks that we see today is large variations between the selected fonts. Often times, a preferred font may have a varying aspect ratio as to one of the fallback fonts. This can create troubles with the overall layout or design of your website if you specifically designed it around your preferred font face.

To avoid the varying aspect ratios between fonts, it is best to select near-identical font faces. After all, the CSS font stacks element or property is “font-family,” and a family should not generally vary greatly at all.

An often-preferred practice is to test each font individually for varying aspect ratios. Select fonts that are identically tall, short, or stubby to avoid huge design gaps. Doing this helps keep your design looking similar to the way you designed it rather than just sticking your favorite fonts in for the font stack that may not be similar to each other at all.

Example of a good font stack is shown below, notice how the fonts in the font stack are fairly popular, most likely installed in most operating systems, they also do not vary greatly with the aspect ratio, and are quite similar in style.

p {
font-family: Helvetica, Verdana, Arial, sans-serif;
}

Line Height

Line height is another important CSS element or property that enhances typography and readability. Imagine reading some text at a relatively small size with very little space between each line. It will not only be very difficult to read but it will also be very difficult to follow.

A combination of the two will most likely result in less readers overall. Therefore, always use the line-height CSS element, and, use a nice comfortable height so you or your readers can easily follow.

For the line-height element, we tend to find 150% of the font-size as a good spacing measure for varying font sizes. However, selecting the line height generally varies on the typeface you select, and should be changed accordingly – but 150% is a good starting point.

The @font-face Rule

Using the @font-face method in CSS is definitely a favorite among web designers, as it can eliminate the whole dilemma of worrying about whether a visitor has a certain font face installed or not, well, to an extent. @font-face works by retrieving a font you specify located on your server to use for your website’s typography.

For example, you may have a favorite font that you want to use on your website without worrying too much about others who may not have it; you can simply use @font-face and assure that most of your visitors will see that font exactly. While @font-face sounds like what you may have been looking for, it does have a few drawbacks. One of the major drawbacks to using @font-face is that you cannot technically use all fonts you desire.

Many fonts are behind many restrictions and licenses that do not allow you to use them in such manner. However, you can use many free fonts that are licensed just for that, so while they might not be exactly like your favorites, they can work.

Another drawback to using the @font-face method is that it is not immediately cross-browser compatible. You do have to add a little extra CSS code to assure it is.

Lastly, when using the @font-face method, you should know that it is not a replacement to using font stacks because in some cases, the font may not load properly and you would require a fallback. With that in mind, below is a code snippet showing you an example of using @font-face. Notice that the font-family property or element above the src acts as an identifier for your font, so that when you use the font in a selector, you identify the font in the font stack using it.

@font-face {
font-family: myfont;
src: url('myfont.otf');
}

As an alternative you could use services like Typekit, FontDeck, or even the Google Web Fonts API or use some of the pre-made @font-face kits provided on FontSquirrel, or even create your own.

There’s also an article right here on SpyreStudios about @font-face.

Conclusion

To conclude, the techniques we provided are definitely not the full list of simple great enhancements. However, they are techniques that are often improperly used or not fully implemented.

With that said, using the techniques properly can definitely make great enhancements to your overall typography and design without spending the time creating workarounds for techniques that do not need it. Let alone the effort put into making your workarounds compatible with different browsers.


BoxieDesigner

About the author:

BoxieDesigner is a blog focused on providing quality and informative articles about web design and development. Follow BoxieDesigner on Twitter.

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!