Despite living in a world dominated by streaming video and visual social networks, the web is still primarily a place for reading. This means there is a tremendous amount of value in having solid, readable typography on your site. With the advances in CSS over the past few years, we are finally able to tackle a variety of typographical issues that print has long solved. In addition, we are also able to address a lot of challenges that are unique to the web. Never have we had more control over web typography. Here are 6 quick snippets that can take yours to the next level.
Responsive Font Sizing
Not every screen is created equal. With a vast array of screen sizes, resolutions, and pixel densities it is crucial that our typography adjusts itself to fit the user’s screen. While we’ve had access to relative font measurements for awhile, they have been cumbersome to work with. Now with rem we can have relative font-sizing without all the headaches. Let’s take a look at how easy it is to scale typography for different screens.
html {
font-size: 62.5%;
}
h1 {
font-size: 2.1rem // Equals 21px;
p {
font-size: 1.6rem; // Equals 16px
}By setting font-size to 62.5% it allows use base 10 for setting our font-size using rem. This means a font set to 1.6rem is the same as setting it to 16px. This makes it easy to tell what size our text is actually going to be, something that is often an issue when using em. Browser support for rem is really good at this stage, so you shouldn’t need a fallback. However, if you need to support older IE it is simple as creating a second font-size rule set in px after the line you set it in rem.
All that is left is to scale our text based on screen size or resolution. By using media queries, we can keep the relative sizing of type elements the same without having to manually adjust each element for every breakpoint.
// Scale Font Based On Screen Resolution
@media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
html {
font-size: 125%;
}
}
// Scale Font Based On Screen Size
@media only screen and (max-device-width : 667px) {
html {
font-size: 31.25%;
}
}This will scale all the type on the page with just one property per breakpoint, there is now no excuse not to adjust font-size based on your users’ screens.
Relative Line Height
Leading, or the space between baselines in a paragraph, is an important typographical attribute that directly affects the readability of your content. The right line height provides a distinction between lines of text, allowing a reader to scan a block of testing quickly.
An easy tip a lot of us miss is setting a unitless line-height. By setting line-height in this way, it acts as a ratio to the size of your type. This scales your leading with your font-size, making it a perfect compliment to using rem:
p {
font-size: 1.6rem;
line-height: 1.4;
}This will set our line-height at a ratio of 1.4 times our font-size. Consequently, 1.4 is a good value to start with when tweaking your leading, but your ratio will ultimately depend on the font you are using.
Rendering Control
The way type renders on a web page is affected not only by the properties of a user’s screen, but also by their operating system and browser. Different font-rendering implementations can mean the difference between your web fonts loading quickly and clearly or chugging along and rendering into a pixelated mess. Font services like TypeKit recognize this problem and provide you a way to preview how a font will appear in different operating system/browser combinations. Luckily though, you don’t have to leave it completely up to chance. Some browser engines, like WebKit, give us some extra control over how a font renders.
text-rendering controls how a font is rendered by the browser. If your goal is optimal legibility, setting text-rendering to optimizeLegibility will make use of additional information provided in certain fonts to enhance kerning and make use of built-in ligatures.
p.legibility {
text-rendering: optimizeLegibility;
}While this sounds perfect, there are scenarios where you don’t want to use it. It can crush rendering times on less powerful machines, especially mobile browsers. It is best to use it sparingly on your content, and not just apply to every piece of text on a page. All browsers support this property except Internet Explorer.
This is not the only way you can optimize font rendering. Webkit browsers also allow you to adjust the type of anti-aliasing they use to render fonts. Chrome is notoriously polarizing in how fonts look, so this is a welcome addition. It is best to experiment with the different options, as it really comes down to the font you’ve chosen and your personal taste.
p {
webkit-font-smoothing: none;
webkit-font-smoothing: antialiased;
webkit-font-smoothing: subpixel-antialiased;
}Lastly, if you don’t find that the font-smoothing options aren’t enough, you can had a bit of boldness to your fonts in WebKit, with the following snippet. The result isn’t for everyone, but if you find your font is rendering a bit on the light side, it does the trick.
p {
-webkit-text-stroke 0.35px;
}Hanging Punctuation
Hanging punctuation is a typographical technique that keeps punctuation at the begging of a paragraph from disrupting the flow of the text. By utilizing the left margin, punctuation like open quotes and list bullets are able to be displayed while still allowing text to be left justified. This makes it easier for the reader to scan a paragraph. We can achieve this effect by applying the following snippet to elements where we lead with punctuation or bullets.
p:first-child {
text-indent: -0.5rem;
}
ul {
padding: 0px;
}
ul li {
list-style-position: outside;
}One note with bulleted lists is to make sure its container does not have overflow set to hidden as this will hide the bullets when they are set to outside if you want to be super forward-looking. Work is being done on giving us even more control over hanging punctuation, including character detection and support for leading and trailing punctuation.
Proper Hyphenation
One of the most frustrating things on the web for typography purists is the ragged right edge on blocks of text. Books solve this through carefully justified text. This, unfortunately, is not an option for us yet on the web, and while a lot of libraries attempt to solve this with JavaScript, there are some things you can do to handle this with CSS alone.
.hyphenation {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.no-hyphenation {
-ms-word-break: none;
word-break: none;
// Non standard for webkit
word-break: none;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}Browser support is pretty solid, with Chrome being the notable exception. You must set a language attribute on the parent element, as the browser leverages this to determine hyphenation rules. Also, note if you are using Autoprefixer, it will not add all the appropriate variations to the hyphens property.
Descender-Aware Underlining
This is a newer trick I first noticed in iMessage on iOS. It makes underlined text a bit more readable by protecting descenders (the parts of a letter that drop before the baseline) from being obscured by the underline. This makes it an especially good fit for links.
.underline {
text-decoration: none;
text-shadow: .03rem 0 #FFFFFF,-.03rem 0 #FFFFFF,0 .03rem #FFFFFF,0 -.03rem #FFFFFF,.06rem 0 #FFFFFF,-.06rem 0 #FFFFFF,.09rem 0 #FFFFFF,-.09rem 0 #FFFFFF;
color: #000000;
background-image: linear-gradient(#FFFFFF,#FFFFFF),linear-gradient(#FFFFFF,#FFFFFF),linear-gradient(#000000,#000000);
background-size: .05rem 1px,.05rem 1px,1px 1px;
background-repeat: no-repeat,no-repeat,repeat-x;
background-position: 0 90%,100% 90%,0 90%;
}First, we create a text-shadow the same color as our background (in this case white) around the content we want to be underlined. The key is that the shadow is thin enough to obscure things behind it, without overlapping other letters. Next, we use a background gradient to recreate our underline. The text shadow alone is not enough as a normal text-decoration: underline is actually placed over the type. The gradient will appear just like a normal underline, but now the text-shadow will obscure the underline where the descenders overlap it. By using rem, this effect also scales based on our font-size.
Conclusion
Users still spend a tremendous amount of time reading online. Making that as frictionless as possible should be one of the top priorities for any site with written content. With just a little bit of CSS, we can drastically improve the readability of our content with little to no overhead.
About The Author
Brian is a Front-End Architect, Designer, and Product Manager at Piqora. By day, he is working to prove that the days of bad Enterprise User Experiences are a thing of the past. By night, he obsesses about ways to bring designers and developers together using technology. He blogs about his early stage startup experience at lostinpixelation.com, or you can read his general musings on twitter @b_hough.
