Kyle Schaeffer - Web Design and SharePoint Branding

One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer. Meet the Units “Ems” (em): The “em” is a scalable unit that is used in web document media. So, What’s the Difference? It’s easy to understand the difference between font-size units when you see them in action. As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. Em vs. We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. The Verdict The winner: percent (%).

CSS: fonts Font families After the color, the font is probably the most basic property of a page. On this page I won't show any "tricks," but I will show the range of font variations that CSS allows. Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. The following table shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones: Font styles Most fonts have various styles within the same family, typically a bold and an italic one, often also a bold italic style, somewhat less often a small-caps and in a few cases extra-light/extra-bold or stretched/condensed versions. The table below shows a number of different styles. In CSS3, there is one more style available: 'font-effect' makes the letters look engraved or embossed.

Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - Web design tips & tricks Last updated: 2008/06/03 Return to the main page Introduction Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". This is the reference I use when making web pages and I expect you will find it useful too. If you are new to web design, maybe you are thinking: "Why I have to limit to that small set of fonts? If you want to know how the fonts are displayed in other OS's or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. The list First, a few introductory notes: The names in grey are the generic family of each font. 1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems. 5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles.

Last Word in Font Management © 2000-3 by Foster D. Coburn III, All Rights Reserved. Part of my seminars covers the topic of font management. Out With the Old I know that you are busy and you just don't have time to do this right now. We've got to start by cleaning out the fonts on your computer now. Now that we've identified the four major types of fonts, we have to start deleting. In With the New Now that you have a sparkling clean Fonts folder, we need to start putting fonts on your hard drive. Create a folder entitled TT, PS or both in the root of the drive to which you will copy the files. You've now copied all of the fonts to your hard drive. Go into one of the folders that you copied. Press Alt-Enter to bring up the Properties dialog box. You'll have to repeat these last two steps for each folder that was copied. You've now got all of the fonts on your hard drive and available for use. Tip: If other programs provide fonts, just follow these same steps so that you can keep all of your fonts under control.

A Test Of Character: 10 Font Games That Prove Typography Can Be Fun The quick brown fox jumps over the lazy dog. This is the famous pangram for anyone who pays attention to fonts and the art of typography. If you haven’t heard this ever, then it’s time to exit the arena because the battle could get bloody as we head to some of the font games mentioned below. Well, I did manage to playfully throw in some font terms there. Kern Type In typography, kerning is about adjusting the space between two letters for a proportionate look. Shape Type Shape Type is a game that is more difficult than the one above. Kern Type and Shape Type have been developed by Mark Mackay. TypeConnection We have covered the extremely well designed “typographic dating game” in detail before. I Love Typography This is a straight-up font identification game. Ragtime “Ragged” is typographic alignment along a margin. Shoot the Serif A word of advice. Helvetica This is a story of revenge and retribution. Poster Letters Type War Arial vs. What Type Are You Image Credit: tarale

8 Simple Ways to Improve Typography In Your Designs Advertisement Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect. These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we’re going to focus on how to apply them to web design using CSS. 1. The measure is the length of a line of type. A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. I’m using px because it makes the math easier but this also works with em’s. 2. Leading is the space between the lines of type in a body of copy that plays a big role in readability. 3. Hang quotes in the margin of the body of text. 4. 5. 6. 7. 8.