Lịch sử chữ viết
Font và cấu trúc
Chữ lồng ghép
Chữ biểu cảm
Typography is the art of designing letters, words, paragraphs, and how they interact with each other. Many designers and developers often equate typography with choosing a font or typeface, while others simply forget that 95% of web design is typography and tend to forget about it. Clearly, if typography is really 95% of web design, it should be at the forefront of the mind of every designer and developer. Here are Six Ways To Improve Your Web Typography.
The Basics of Typography are important for all designers, whether or not they are designing for the web.Typographic Definitions
Below are some basic typographic definitions that every designer/developer should understand when dealing with typography. This list is by no means comprehensive. See the Recommended Reading List at the end of this article for more comprehensive glossaries.
To create an effective typographic scale, the best method I have found is to use the unit of size measurement "em," as it sets the size relative to the base of a given document. In the example below, the base font-size is 12 pixels, which would set the standard font-size for paragraphs at 15 pixels.
The vertical rhythm of line spacing that provides the optimal spacing for the eye to follow. To create this rhythm it is best to follow a baseline grid. From my experience, online vertical rhythm is best set at or near 1.5em. NETTUTS+, for example, uses a vertical rhythm of 1.6em, which equates to roughly to a 17.6px line-height (based on a 11px font-size).
Below is a standard vertical rhythm that I use on many of my websites built on the 960 grid system. To achieve vertical rhythm appropriately, every paragraph should have a margin or padding below equivalent to the standard baseline grid line-height.
As most designers and developers know, websites render differently in different browsers. This is especially true with rendering fonts. Below is a comparison of how five popular browsers render the same text differently:
Image Source: FontTech.Info
When building a typographic layout or a site that is content-rich (like a magazine or blog site), being able to see the differences between the typography in each of the different browsers and operating systems is a major boon. Designing in the browser is nothing new (even back in 1997 when I created my first website, I designed it entirely in the browser). While not every site is a candidate for designing in a browser, the ones most concerned with typography are perfect for designing in a browser.
Image Source: For a Beautiful Web
Andy Clarke, popular designer/author, recently spoke at An Event Apart Boston with a presentation called Walls Come Tumbling Down in which he advocated designing in the browser for many reasons. The image above, taken from his presentation, shows the use of a standardized grid for both columns and vertical rhythm.
The best way to design in a browser is to use a grid like this. In the source package, I have included two different columnar grids, each with three variants of vertical rhythm. The CSS below shows the easiest method of deploying one of these testing grids by replacing the background image or images in the body of the HTML page using a class specific to the grid that you choose. Simply add the specified class to the body tag or content container DIV tag, and you're ready to design in your browser.
It should be noted that for good vertical rhythm, it is necessary to have granular control over the line-height to reach the proper vertical rhythm. Additionally, you can use this Grid-making Bookmarklet to overlay any website with a customized grid. I find this to be useful when you cannot replace the background image with one of the grids.
Replacing text with images has been a standard practice in web design since the 90's. With the adoption of CSS in the major browsers, image replacement techniques began arising that do not simply consist of making an image and placing it in the place of the text. The first widely accepted of these was Fahrner Image Replacement (FIR), but as people played with CSS Image Replacement, they realized this technique was not accessible. The Phark Image Replacement technique was originally conceived as an accessible replacement for the classic FIR technique. First proposed by Mike Rundle of 9rules in 2003, Phark Image Replacement relies on the the use of the text-indent and background-image CSS properties to hide the text from the user but remain accessible for screen readers and search engines.
To use Phark Image Replacement, set the container element (in this case, the DIVs) with a defined height and width. Then set a background image. Finally, set the text-indent property to -9999px. The text-indent property essentially pushes the start of the text left 9999 pixels, but this does not increase the scrollable area, effectively causing the text to disappear.
While Phark is currently the most common CSS-only Image Replacement Technique, there are many others with different advantages and disadvantages. For example, Phark fails to show anything to the user if images are disabled but CSS is enabled, a relatively small disadvantage. Additionally, CSS Image Replacement is not really meant for large-scale typography (i.e. articles), but is best for buttons, headings, and other small quantities of text. To learn more about other CSS-based Image Replacement Techniques, CSS-Tricks wrote a good summary of all available CSS-based Image Replacement Techniques called Nine Techniques for CSS Image Replacement.
The first of the advanced image replacement techniques that arrived on the scene was Scalable Inman Flash Replacement (sIFR), originally designed by Shaun Inman as IFR and subsequently advanced to the sIFR designation by Mike Davidson and Mark Wubben, who currently maintain the project.
If you want to learn how to implement and see examples of sIFR, NETTUTS+ has a great tutorial on how to use sIFR or visit the Official Site for sIFR2 or the Official Site for sIFR3, the most recent version.
The most recently popular advanced image replacement technique is called cufón, supposedly a portmanteau word of "custom" and "font" according to some. It "aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use" according to the cufón wiki.
If you want to learn how to implement and see examples of cufón, NETTUTS+ has a great screencast and tutorial on how to use cufón or visit the Official Site of cufón.
The Facelift Image Replacement (FLIR) technique is different than the two previously mentioned in that it uses server-side scripting with PHP and the GD Image Library. It was developed by Cory Mawhorter to provide an automatic server-side font replacement technique.
CSS3 is relatively new in the landscape of the web, and it has not yet gained widespread usage. One of the most exciting features of CSS3 is the @font-face rule. There are two big hurdles for using @font-face right now. First, not many font foundries and typefaces support @font-face embedding. Some licenses are vague and do not address web embedding, whereas some explicitly prohibit @font-face embedding. For a list of typefaces that support @font-face embedding, you can webfonts.info has a great list. The second hurdle is that not all browsers support the @font-face rule, as shown in the browser support table below.
Image Source: Wikipedia
The @font-face rule now allows font embedding in IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), and Safari (PC & Mac) with support in Opera 10 and Chrome coming soon. This means that, in some form or fashion, webfonts will be available for an estimated 90%+ users.
Ideally, this first @font-face declaration would be part of a CSS file served via conditional comments to only IE with the EOT version of the font. The second @font-face declaration should be a OTF or TTF font file. Also, due to browser security restrictions, the source URL for declarations should be relative (although some browsers do support absolute URLs).
Yep. That's all there is to it.
Once declarations are made, the font-family that has been declared can be used like any other font that would be available on a user's system. This is an exciting new territory for web designers and developers that is going to be important to follow throughout the coming months.
Upcoming @font-face delivery projects like Typekit and Typotheque are looking to provide significant help in terms of negotiating web embedding licenses with the big font foundries. Additionally, with all the questions about renting fonts for web embedding, it may prove difficult to get some (or all) of the fonts that you are going to use in a web design for use in your image editing software. There's two solutions to this: 1) design in the browser as recommended above, or 2) use similar typefaces to design the static page designs.
Typography on the web is in its infancy when compared to typography in print, broadcast, and film. Watch other forms of media for inventive typography usage. The next time you are at the movie theater, check out all of the movie posters and pay close attention to the typography used in previews and trailers. Take a look at the typography both inside and on the cover of books at your local bookstore. Examine your DVD collection or your favorite magazines for inspiration.
Online, follow leading typography experts online like For a Beautiful Web, I love Typography, TypeInspire, or webfonts.info. Below, you will find a list of recommended reading links for more information on web typography in addition to NETTUTS+ and the aforementioned.
Hopefully, these six tips will help you the next time you are working on typography for the web. It's an exciting time to be a typophile working on the web.