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.
-
There are three tags that are most commonly used to wrap segments
of text and apply common formatting to those segments.
- <p> - This tag wraps paragraphs, commonly understood just as you learned in school: a single subject area.
- <div> - This tag wraps sections of text commonly in a block. Being wrapped in a block means that typically the text occupies its own section on a page with space around it to visually set it apart from different elements. It does not imply anything contextually (see below).
- <span> - This tag wraps sections of text usually inline with other text. Visually, other than the different formatting for the span, there is usually no indication the span is separate from its enclosing span or block. It does not imply anything contextually (see below).
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.
-
This is an overview of some of the tags that give context -
in other words a hint of the purpose - to segments of an HTML document.
- <header> Defines a container for introductory content. There is often only one of these per page, but sometimes you see one per major section.
- <footer> This is the pair to a header, and usually contains things like notes, copyright notices, or links to major sections of a site.
- <article> An article is independent, self-contained content and is usually used exactly as its real-world meaning implies.
- <section> A major section of a document, separate from other sections, usually analogous to a chapter in a book. Sections are often contained within articles.
- <address> Used in indicate the segment contains contact information usually of the author of a document or its owner, whether a person or a business.
- <blockquote> A blockquote segment contains text that is quoted from an external or different source.
- <main> The contents of a main tag are the main content of a document. It should exclude standard hearders, footers, menus and the like.
- <cite> A segment that contains the title of an artistic work, such as a book, play, movie, or song.
- <h1/h2/h3/h4/h5/h6> Indicates headings within content. These often give hints to anything that may scan and try to understand your document, especially search engines.
- <q> The contents of a q tag are a short quotation.
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:
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