Typography as an art form has come a long way from its usage in print. As web technology continues to advance, so has typography in its role on the web. Knowing the fundamentals of typography is important to designers because effective designs stems from good typography practices. Since typography is a the complex subject, I will focus on some basics of typography, web typography and its usage on the web.<\/p>\n
What is the difference between a font and typeface?<\/strong> <\/em> Two of the more common typefaces classifications are serif or sans-serif. Serif typefaces are distinguished by a short line of finishing stroke at the end of a letter’s stem or stroke. Sans-serif letters are the opposite, no finishing strokes or lines.<\/p>\n Understanding the basic anatomy of a letter is the beginning of what typography is. Some terms in which you will often encounter include: ascender, baseline, cap height, descender, stem, stroke, and x-height. Some definitions that web designers should also understand are: weight, line height, rag, alignment, widows and orphans. Knowing these terms can help designers\/developers choose a typeface and how to effectively style content on the web. Fonts.com provides a collection of typographic terms<\/a> in their glossary section.<\/p>\n In the past, designers could only use web safe typefaces to display their content. Web safe typefaces vary on different operating systems. For example, this list of web safe typefaces<\/a> is my go-to guide for font comparisons in windows and macs. Now, there are many ways to display custom fonts. Some popular practices include standard image replacement techniques like Phark Image Replacement and advanced image replacement techniques like sIFR and cuf\u00f3n.<\/p>\n Phark Image Replacement:<\/strong> HTML: CSS: To compare the pros and cons of the other standard and advanced CSS image replacement techniques, please check out this excellent post<\/a> by CSS-Tricks.<\/p>\n With the launch of CSS3, embedding high quality custom fonts has never been easier with @font-face. However, you must own or have purchased the license of the fonts before you can embed them.<\/p>\n Basic syntax for @font-face: You can then build a font stack using the new embedded font. Designers can find and download free custom fonts on websites such as Font Squirrel<\/a> or through Google’s new directory of web fonts<\/a>. One of the first websites to team up with font foundries to provide font embedding services is Typekit<\/a>. There is a trial plan for those interested in checking it out and prices per year start at $24.99 for licenses to 5 fonts.<\/p>\n
\nThe terms font and typeface are often used interchangeably in design. A font means one style or weight (Arial Bold or Arial Regular). A typeface refers to a family of fonts (Helvetica Regular, Helvetica Bold, Helvetica Italic, Helvetica Black, etc.)<\/p>\n
\nThis standard technique is accomplished by using a defined height and width to set a container element (example: DIV) that also has a background image set to it. Setting the CSS property of text-indent to -9999px will push the start of the text off the visible area of the screen. Some pros of this widely used technique are 1) it does not create unnecessary scroll bars and 2) successfully makes the text disappear onscreen for viewers, but remains accessible for search engine. The only con to this technique is that when images are turned off and CSS is still enabled, viewers would not be able to see anything.<\/p>\n
\n<div id=\"logo\">
\n Website Logo
\n<\/div><\/code><\/p>\n
\ndiv.logo {
\n width: 200px;
\n height: 100px;
\n background: url(\"images\/logo.jpg\");
\n text-indent: -9999px;
\n}<\/code><\/p>\n
\n@font-face {
\nfont-family: Chunkfive;
\nsrc: url('Chunkfive.otf');
\n}<\/code><\/p>\n
\nfont-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;<\/code><\/p>\n