CSS and Text

When working with text on a website you have a wide range of CSS techniques to manipulate the text. These methods do not always act as you may intend and may hinder the readability of your site. What's safe and whats not, what ways can you use to keep your websites readable.

Many of the font and text properties that you can modify with CSS are similar in nature to what you can do in programs like Photoshop or Word or any other program on your desktop. However the CSS options are both limited in functionality and can cause rendering in some browsers to not be as nice as might be expected.

Both Windows and OS X will always render your fonts differently no matter what you do.

Below you can see the effects of font / text changes on your text:

.text {
font-family: font-weight: text-indent: letter-spacing: word-spacing: text-decoration: text-align: line-height: text-transform: vertical-align: font-smooth:
}
M

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog


Rendering

Browsers unlike Photoshop has to render text quite often; and browsers are all about speed. To this effect each browser has chosen the fast rendering available via the OS that takes advantage of sub pixel rendering.

Windows uses ClearType as the render engine and OS X uses Quartz as it's render engine. Both of these provide sub-pixel rendering of your fonts and will make them appear to use colors other then the actual font color to make them appear smooth.

Additionally you will get a different rendering feel on higher density screens e.g. Retina displays.

font-smoothing

Font smoothing was a part of the CSS3 spec originally however has been dropped but still implemented by Webkit and Gecko for OS X only. This can be used to get a better but more computationally expensive look, but is very limited in which browsers support it: (open the appropriate browser to see the effect here)

-webkit-font-smoothing: subpixel-antialiased; (default)
-webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; (both off)
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; (both on)

Further reading

Sizing & Measurement

Sizing your changes with css is very important in how it display's on a users browser. When sizing if you use the inappropriate unit of measure you can make the fonts inconsistent or worse, blurry.

px

px used to stand for "pixel", but now stands for "point", not to be confused with pt due to the rise of high density pixel screens (e.g. retina displays). px is also the default go-to sizing for most developers as it's the only way to get "pixel perfect" designs. However if you use non-whole numbers with your sizing of fonts, or font spacing you will find some fonts become blurry on non-high density screens; this is due to the sub-pixel rendering and antialiasing of the fonts by the browser. Try to avoid px sizing whenever possible.

em, rem, ex

em, rem and ex are all relative units of measure and when rendered in the browser will use a little bit of a fuzzier math to determine the size of the font, but based on this math the fonts will be smoother. This should be the go-to sizing for all of your fonts as it will allow for better rendering and more flexibility in your designs. Further it will allow you to "zoom" element

%

Percentage sizing of text should be avoided whenever possible. there are very few cases where this is beneficial. Test set to percentage size will scale based on the size of the container.

pt, cm, mm, in, pc

These sizings are for print media only and are very non standard for screen rendering. these should be avoided for anything but print stylesheets.

Fonts

font-family

The font family property is used to determine which fonts are rendered for your text. However not every font on your computer can be used on a website; depending on what OS you are using and what applications you have installed on your system will determine what fonts are available on your computer.

There is however a set of "web safe" fonts that can generally be guaranteed to be installed on all computers. See here

Additionally you can install web fonts from sites like google fonts. these will work on pretty much any browser these days, however note that some corporate networks will block web fonts so make sure to add a web safe font to the end of your font family definition for those users.

font-weight

Font weight determines how bold your font is. The "gotcha" for this is that not all fonts support all font weights, web fonts are notorious for this to reduce the size of the font download you will generally have to make sure to include all font weights you use on your site.

Text

text-indent

Text indent does what it sounds like and indents text, this is of course only the first line of text. When indenting it is best to either use full pixels or relative units to avoid blurry text.

letter-spacing, word-spacing

Letter spacing will allow you to change the spacing between letters and word spacing will let you define the spacing size between words. be sure to use full pixels or relative units to again avoid blurry text.

text-decoration

Underline, overline or line-through. Enough said.

text-align

Left, right or center.

line-height

Line height can be used to set the spacing between lines.

text-transform

Capitalize, uppercase or lowercase. Best practice is to use these when the source text should not be in the format you wish to display (for accessability)

vertical-align

Vertical align is only usable in a table-cell box. You can read more here.

By on