Learn CSS3 A-Z: How To Use CSS3's Text Styling Properties
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
Print may have gone out of vogue; but the contributions it made to the world of typography are invaluable. Some of the digital work attempt to mimic print, and then add the advancements to it. Typography on the web has always trod a couple of steps behind the rest of the digital space. CSS3 makes an attempt to bridge some of these gaps by introducing downloadable fonts, text-shadow, multi-column layouts, text shadow. Through this article, we will take a look at each of these properties and see how we can use them.
One of the drawbacks of the web was that we didn't have too many options for fonts. As developers, we can not know what fonts are installed on the user's machine. So either we had to make sure the site looks good even with not-so-sweet fonts or we could target the lowest common denominator and design the site with only the basic fonts that we could be more or less sure the user would have. All this changed when CSS introduced downloadable fonts.
font-family: Handwriting; src: url('HandwritingDakota.ttf');
For more information on how downloadable fonts work, you can read more about it here.
This is another text property that the web is borrowing from the print industry. Newspapers, magazines and several other publications lay out text in multiple columns on the same page. The reason for this is that a block of text that is very wide becomes hard to read. The optimal width of a block of text should be about 7 to 8 words per row. You might be thinking that it should be rather simple to implement multi-column layouts even without CSS supporting it, but in reality it isn't. So thankfully CSS3 has introduced support for multi-column layouts. You can either define the width of the columns or the number of columns that you would like and the browser will accordingly lay the text in equally wide and tall columns. If you specify the height of the container, then the browser will make sure that the columns have at least that much height.
Here is a sample of the CSS used to display text in 3 columns:
If the designer tells you that they want certain text on the page to render with a shadow, you would make a painful grimace in the hope that they would tell you to let it go, but if that doesn't happen, you will have to fire up Photoshop, enter the text there, create a shadow for it and export it as an image and insert it in your page. Painful isn't it? Now if you are using CSS3, you won't make any grimace when the designer asks you to add a shadow to any text. Rather you will smile and ask them if she would like to add shadow on other pieces of text too.
Here is the syntax for the text-shadow property:
And here is a sample of the CSS code that is used to create it:
Browser compatibility is always a concern with CSS3 features; text-shadow works on all browser platforms except for Internet Explorer. Version 9 is out and it still doesn't text-shadow. But since text-shadow isn't a critical property, if it doesn't work on certain browsers, we can overlook it.
That covers the text properties that CSS3 offers as a step towards bridging the gap between print and digital forms of content. There are several other text properties that were introduced in earlier versions of CSS that are only now beginning to be implemented by many browsers.