Web typography has the advantage of drawing on the wealth of knowledge belonging to the centuries-old tradition of print typography. By the same token, that tradition carries with it standards of best practices and excellence that web typography is called on to live up to.
However, the web as a medium of communication comes with its own peculiarities. So much so that we’re led to think that a seamless move from print to web typography is a tough call. In his book On Web Typography, p.110, Jason Santa Maria explains:
Printed books are a static format. From the designer’s initial layout of the book to its trip to the press bed, the warehouse, the bookshelf, and your hands, the output of that book doesn’t change. It’s delivered exactly as the designer conceived it.
When it comes to the web, the very same site can be experienced very differently according to a number of factors, e.g., various kinds of devices, screen resolutions, personalized browser settings, etc. Some of these factors, as Jason further explains …
… may give us the impression that the type is too small, others may cause us to miss something important just off screen, and still others may make it nearly impossible to view the web page at all.
That said, it’s also true that “The web is the best place for text.”, as Tim Brown claims in his talk on Universal Typography. Text on the Internet can be “searched, copied, translated, linked to other documents, it can be printed, it’s convenient, it’s accessible”.
The flexibility of the web doesn’t mean relinquishing control. On the contrary, as web designers, we’re still expected to make informed choices about anything we put into our work, and text is no exception. The way text elements are laid out, their color, size, typeface, all this and more communicate a website’s core message and brand.
To manipulate the appearance of text on the web, our primary tool of choice is CSS.
The CSS properties I’m going to present in this post can be found in the CSS Text Module specification.
This module describes the typesetting controls of CSS; that is, the
features of CSS that control the translation of source text to
formatted, line-wrapped text.
In other words, The CSS Text Module deals with the display of characters and words in the browser, and how they’re spaced, aligned, hyphenated, etc., using CSS.
What constitutes a basic unit of text or word, as well as where exactly a word is allowed to break in a given piece of text, significantly depends on the rules of the language being used in a website. For this reason, it’s important to declare this information in the HTML document (usually in the lang attribute of the <html> element).
Here, I won’t be discussing the following two topics:
- fonts, that is, the visual representations of characters, i.e. glyphs, and their properties;
- features of CSS related to text decoration, such as underlines, text shadows, and emphasis marks.
If you’re curious, you’ll find the latest documentation on fonts and text decoration properties in the CSS Fonts Module Level 3 and the CSS Text Decoration Module Level 3 respectively.
Manipulating Letter Case
There can be times when text elements need to be displayed in capital letters, for instance first and last name. CSS gives us control on letter case with the text-transform property.
The default value of the text-transform property is none, that is, no effect on letter case is applied.
The capitalize Value
If you’d like the first letter of each word to be displayed in uppercase while leaving the appearance of all other letters unaffected (whatever their case in the HTML document), using the value capitalize will achieve this:
The HTML:
[code language="html"]
<h2>alice's adventures in wonderland</h2>
[/code]
The CSS:
[code language="css"]
h2 {
text-transform: capitalize;
}
[/code]
Notice how capitalize doesn’t follow title case conventions: in fact, all first letters in the above example appear capitalized, including the word “in”. Authors who intend to follow a literary convention concerning titles will need to manipulate the letters manually in the source text.
The uppercase Value
If your goal is to have all letters displayed in uppercase, no matter their case in the HTML document, uppercase is the appropriate value to use:
The HTML:
[code language="html"]
<h2>alice's adventures in wonderland</h2>
[/code]
The CSS:
[code language="css"]
h2 {
text-transform: uppercase;
}
[/code]
The lowercase Value
Using the value lowercase will cause all letters to be displayed in lowercase. Naturally, this won’t affect the appearance of letters that are already lowercase in the original source document.
The HTML:
[code language="html"]
<h2>Alice's Adventures in Wonderland</h2>
[/code]
The CSS:
[code language="css"]
h2 {
text-transform: lowercase;
}
[/code]
The full-width Value
The specification has added a new value, full-width. This value constrains the character to appear inside a square as if it were an ideographic character, e.g., Japanese, Chinese, etc. This facilitates aligning Latin characters with ideographic characters.
Continue reading %CSS Properties to Control Web Typography%
by Maria Antonietta Perna via SitePoint
No comments:
Post a Comment