CSS Typography


css-typography-new CSS TypographyNot often are CSS and typography used in the same sentence and in many ways, this is right too. Typography is a form of design with variations and choices, whereas CSS is not so much the case. However many do not realize just how much CSS can actually do. CSS can do more than you think.

Web typography

Web typography, like any other form or aspect of web design, takes practice and the correct interfaces to complete the job and the know how to tweak where needed, so you strike the right design balance. However there are many options available through CSS. Both Typography and CSS have their own limitations but having the right information can prove to be valuable when designing a website.

A case for typography with CSS

Many may wonder why use CSS for typography when there are other options available. The main reason is CSS is the most reliable, accessible and the best way to improve readability and visual design of web sites. It also is the easiest way to make changes and refinements to the website’s typography if and when needed. Awareness of the process and technique is the main thing that slows a web designer — not knowing when to apply the techniques and which techniques to apply is the biggest restraint to quality website design. What many do not realize is , there is more control than they know when you handle typography with CSS — from type faces to line height and letter spacing.

Why is web typography important?

Here is why you should bother. Typography is a centuries old art that has its roots in both design and readability, but also has thousands of fonts that can be applied. The downfall to web typography as opposed to the print medium is that you do not have the precise control or the same selection. However you have the right amount of control to improve the display of characters and paragraphs. This alone should be worthwhile and can actually be beneficial when using CSS to handle typography.
When words are a significant part of your website, they deserve a significant part of your attention and have a significant impact on the design of your website.

Default fonts across platforms

There are many fonts available to you when using online typography. Each and every platform has a set of default fonts. Some may feel that this narrows their options. Most of the most familiar default fonts used are Arial, Helvetica, Times, Georgia, Trebuchet, Verdana, and Courier. However, there are plenty of custom web fonts that can be used when you manage typography through CSS and you will have nice results by using the options.

Measurements, sizing and resizing fonts

Your choice of units that specify font sizes have a big impact on how your text is displayed on different platforms and on different browsers. The main thing to keep in mind here is that, with online typography, you will not know for sure how your visitors’ will be viewing your intended font size. They could easily increase or decrease their desired font size through their browser settings to drastically change the composition of your design. This can be good and bad. However, having the flexibility is the best of both worlds.

Options for web typography with CSS

Without using advanced non-CSS techniques, your choices for online typography are limited. However, you still have some reliable options for improving the readability and aesthetics of your typefaces.

Line-height is the most important for improving typography using CSS. Browsers try to make an effort to adjust line-height along with changes in font size, but it is not always in the best interest of the web design, nor is it often done correctly. Depending on the size of your text, adding or removing space between lines can drastically improve readability and web aesthetics. Similarly, when used with caution, word spacing and letter spacing can be used to improve readability or add interest to a headline or short section of text.

Text transform is a property often used when a design needs to have all uppercase, lowercase or where the first letters need to be capitalized. The font variant can be used to apply all small caps.

Indenting is most popular in the print industry; however with CSS the text indent property allows you to indent.

When using narrow, newspaper-like columns, the text align and justify value is useful. This allows for improvement of the flow of the text while defining the layout and overall design of the pages.

Many have had great results with the first letter and first line to help dress up the paragraphs a little more by using the float property to the first letter to the left and the text will flow around it. The added perk about the first line property is that the user can determine what word will fall on the first line when the page is rendered.

Creating scannable text with CSS typography

People tend to scan rather than read every word on websites. That means the judicious use of headings, bold, italics, bulleted lists and highlighting can greatly help the readability of your content as well as make it easier for users to scan quickly. The key here, though, is to realize if you bold, italicize, or highlight almost every word, you’re actually making it harder to read and take the chance of the reader actually ignoring the important areas. You will need to choose smartly what words you want to highlight in your text.

Keep in mind that heading and sub-heading are important and can be your friend. Not only do they help break up your content but they help group it in a way that is scan friendly. But they also provide you with an opportunity to dress up your content when appropriate by adjusting some of the previously mentioned properties. Try experimenting with headings in all caps, vibrant rich colors, and adjust your word or letter spacing to help spruce up and see results.

CSS typography simplifies web design

Intelligent use of CSS typography can make the work of a web designer significantly easier. It may involve learning new techniques of website design and can initially call for additional effort. With changing web standards making CSS the default means for handling typography during website design.

Professional web designers use CSS for typography

Professional web design companies like Flying Cow Design have discovered the finesse that can be achieved in web typography with the use of CSS. If you need a website that uses the best and the latest technologies — not because it’s cool, but because they make your website better and more effective, write to us today!

fb50c5bf790872a8ecad33a6bd15d358?s=100&d=mm&r=g CSS Typography

CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area

October 18th, 2016


Need help with Web Design?

Write to us with your project details and we will get back to you shortly.


Related Articles
Self-hosted WordPress sites are versatile platforms for building a business. The secret to WordPress' flexibility
If you are a business owner looking to grow your business online, here are three
A payment gateway facilitates online credit card payment processing on your website. The software and
An iframe or inline frame is essentially a browser window set within the web page.
Content marketing creates organic traffic, but it requires sound strategy. Separating the two is like
When we look back over the last 10 years, it is amazing how corporate websites
When one mentions browsers, most instinctively think of Internet Explorer, Mozilla Firefox and Google Chrome.
It's rare to find a website to be completely free of errors. This is usually
What are web fonts? When designing for offline media like brochures, billboards, press advertisements, etc.,
Everyone has their own idea about what a good website design is. Since design and