FontFiddle logo

CSS Text & Font Primer by FontFiddle

Primer on CSS Text and Font Design

Last Updated: 31/March/2018

Introduction

This article is a primer on CSS Text and Font Design & Specification. This article assumes you are familiar with very basic HTML and CSS. No JavaScript or any other programming language knowledge is needed.

Overview of CSS Text

In modern HTML, all text is formatted using CSS directives. If you've worked with HTML before, you may have seen markup language tags such as <u> that results in underlined text. All of these types of tags can be best understood now as shorthand for CSS directives. In this case, <u> is shorthand for "text-decoration: underline;". You can actually override <u>, and almost any other tag, to make it do any type of styling you wish.

All segments of text are wrapped in a tag, and the text contained in that tag is styled usually by reference to a CSS class or ID.

The key difference between a class and an ID is that a class can apply to any number of elements in a page, but an ID can apply to only a single element on a page. This is not only important in CSS but also in JavaScript when referencing elements.

To apply formatting to a segment of text, you must apply a style either inline, by class or by ID. More on this below, but first let's talk about context.

Contextual Tags

It is possible to format an entire HTML document using nothing but the <div> and/or <span> tags. However, it is the proper practice to use all of the various HTML tags that supply context and apply your CSS formatting rules to those tags. These not only make maintenance easier, but they give hints to browsers and devices of the purpose of various sections, and can help with things like accessibility and assisted access software.

As mentioned previously, for formatting it is not necessary at all to use the various context tags. However, you really should use them! They make your documents more maintainable and let every other system that processes your document - such as search engines or assisted access software and devices - understand your document.

Apply Styles

This section describes how to apply styles to segments of of text. This is not a complete tutorial on CSS or HTML, but rather intended as an overview.

There are 3 ways to style a segment of text: element-inline, or a style applied by either class or ID. When using a style applied by class or ID, that style can be sourced either page-inline or externally (more on that in a bit).

Styling an element inline

The simpliest - but worst (explained shortly) - way to style an element is an inline style. For instance, let's say I wanted a text span that uses the Courier font, is bold and capitalizes the first letter of every word. To style it inline, I would use: <span style="font-family: Courier; font-weight: bold; text-transform: capitalize;"> This is sample text<span> The result of that is: This is sample text

Why is this bad? Keep reading.

Styling an element by class

The problem with inline styles, as shown above, is they are cumbersome and very difficult to maintain. Using inline styles is fundamentally the same as using the <font> tag from HTML3, and that proved to be an absolute nightmare to maintain for designers.

Typically, you want all segments of a certain type to be styled the same, and if you change the styling, you want to change that in one place and have that change apply to all segments of that type. We call that type a class.

Let's take the example above for the inline style, and covert it to a CSS class.

A CSS-class specification is identified within a style sheet by an initial dot (".") followed by the class name, without spaces. If we wanted to create a class for the style above and name it "myText", in the style sheet we would put the following. .myText { font-family: Courier; font-weight: bold; text-transform: capitalize; }

You can probably already see how much more readable this is than the inline style format used above. The magic is, with this created in the stye sheet, we now just apply this whereever we want to use this stye. How? <span class="myText">This is sample text<span> Much better, yes? Now if we want to change the font-family, let's say, everywhere this is used, we make a single change in the style sheet

Styling an element by ID

For the basic purposes here, what you need to know is that a class can be used any number of times on a single page, where an ID can be used only once. In order to reference the ID n a styesheet, instead of beginning the name with a dot, you begin with a hash ("#"). In the tag, rather than using the "class=" form, you use the "id=" form. All tags can include both ID and one or more classes.

The power of IDs really comes in with JavaScript, which we are not covering in this article.

Style Sheets

Above we talked about specifying your style specification in a style sheet, but what is a style sheet and where do they come from?

Very simply, a style sheet is either the embedded style specifications in your HTML document between "style" tags, or it is (more commonly and properly) an external document loaded using the "link" tag in the <head> section of your document.

For more information on this, you should see an overall HTML primer.

FontFiddle Tool

The FontFiddle Tool allows you to create CSS text & Font specifications using a large portion of the relevant CSS attributes, see the resulting CSS specification, save it, and even share it with friends and colleages. You should spend some time with the tool. You can learn about many of the CSS attributes available to you.

FontFiddle Tool Home Homepage of Author