@font-face test. My 10 favorite typefaces | Veerle's blog. As someone who has a soft spot for typography in general, it is a rather difficult taks to choose my top 10 favorite typefaces. It feels a bit like shifting through all those nice (600 and more) entries I received for the ‘What is Graphic Design’ poster competition from a while ago. What a tough job that was selecting the winners. So here we go… I have to admit, as you'll see my general preference goes towards sans serif typefaces as they include 6 out of 10. The reason why is probably because of their fixed clean shape and lines. The Sans Serifs Chalet (by House Industries) Neutraface (by house Industries) Tarzana Narrow (by Emigre) Verlag by Hoefler & Frere-Jones Bryant by Process Type Foundry Bree by TypeTogether via FontShop The Serifs Mrs Eaves (by Emigre) Requiem by Hoefler & Frere-Jones The Scripts Soda Script (by Emigre) August by Alias via Veer What to choose?
The trend in typefaces aren't like fashion, they don't change that quickly. Inspiration food Resources. Turn Nocturnal — Sans-Serif. Choose a basic leading that suits the typeface, text and measure. “Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.” Leading (pronounced “ledding”) is so called because, in mechanical presses, strips of lead are placed between lines of type to space the lines apart. Leading is achieved in CSS through the line-height property. For example 12 point text can be given 3 points of lead in the following manner: However that example is bad as line-height should never be applied using absolute units such as points or pixels.
In the prior example, when text is resized in a browser, the font-size increases (to 18 pt for example) but the line-height may remain at 15 pt. A better approach is to make use of a unique characteristic of the line-height property: it is the only CSS property for which non-zero numeric values are allowed without units. Kern consistently and modestly or not at all | The Elements of T. “Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations Wa and To are kerned.” At present there is no mechanism within HTML or CSS that specifically enables kerning.
However text on the Web does not generally need manual kerning, as all digital fonts have kerning tables built-in. These tables define which letter pairs need adjusting and by how much, and are usually adhered to by operating systems. The only time manual kerning may prove necessary is with larger text such as that in headings, in particular when numbers, italics or punctuation are involved.
It is also important to bear in mind that letter pairs in one font of your font-family list may need kerning whereas in another font they do not. Where you do wish to kern letter pairs, you must insert a neutral inline element, such as span and apply the letter-spacing property. Which should render as: Washington and Toronto. Letterspace all strings of capitals and small caps, and all long. “Acronyms such as CIA and PLO are frequent in some texts.
So are abbreviations such as CE and BCE or AD and BC. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size. Many typographers like to letterspace all strings of numbers as well. Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.” Letter spacing in CSS is achieved with the aptly named letter-spacing property. If you have created static pages for your website then inserting <acronym> and <abbr> elements where appropriate might be slightly tedious but probably feasible. I’m not going to explain regular expressions here – there are plenty of resources elsewhere on the web – but in the form of a PHP function here is an expression to get you started:
Choose a comfortable measure | The Elements of Typographic Style. “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.” The measure is the number of characters in a single line of a column of text. HTML doesn’t have a concept of columns per se, instead text is held within boxes.
In CSS the width of a box is set using the width property with any unit of length, for example: When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In the preceding example, column 1 has a fixed width: it has been set to 400 px wide. Column 2 has a liquid width: it has been set to 50% wide. Column 3 has an elastic width: it has been set to 33 em wide. YouTube - Typography School. Whitespace. My first design job was with a small print design agency in Manchester that produced work in varying media: packaging, publications, and marketing support materials, and…direct mail. Article Continues Below I soon discovered that the graphic design principles I’d learned in college were of little use when I designed for direct mail, where big, bold, and crowded is the order of the day.
In the words of one client—words I will never forget—“whitespace is empty space.” Direct-mail clients need their packages to look down-market, because it works for them. But for just about everything else, my client couldn’t have been further from the truth. Meet whitespace#section1 “Whitespace,” or “negative space” is the space between elements in a composition. So what does whitespace do? Micro whitespace and legibility#section2 A couple of months ago, I was lucky enough to see Erik Spiekermann give a lecture. In newspaper design, information is dense. Brand positioning#section3 Figure 3. Figure 4. Figure 5. 15 Excellent Examples of Web Typography. Under the Bonnet | i lo. Part II: taking a list apart In part one, 15 Excellent Examples of Web Typography, I showcased 15 web sites that make excellent use of type.
To avoid this article being inordinately long, I’m going to focus on the first site in the list, namely A List Apart. To take all 15 examples to pieces would be rather pointless, because most of what’s good about them is shared. A List Apart The job of web typography is not to simply mimic that of print. However, despite these differences, the elements of good typography are shared across these two mediums. Home page view Article page view Not only is this site a wonderful resource, with well written articles, but it has the feel of a magazine or an academic journal — both in its design and in its typography (it even has its own ISSN number!). The first tick against this site sits beside “White Space”. Good typography is like bread; ready to be admired, appraised and dissected before it is consumed. — Robert Bringhurst Letterspacing Grid. ATypI Brighton 2007. Helvetica - t-shirt - ThisNext. 40+ Excellent Freefonts For Professional Design | Fonts | Smashi.
Embed font CSS Tip: Get Any Font You Want. CSS Tip: Get Any Font You Want by Larisa Thomason, Senior Web Analyst, NetMechanic, Inc. Have your heart set on using a particular font on your site? You may think your online video sales Web site won't be complete without the "Showtime" font. But what if your visitors' browsers don't have Showtime installed and default to Times Roman instead? If your page requires an unusual font, you can embed it with a Cascading Style Sheet (CSS). Why Use Embedded Fonts? Because a font is an operating system resource, not a browser resource.
From a page designer's perspective, this is a big weakness. That's where embedded fonts come in: with them, you don't have to worry about browsers defaulting to a more common font. Apply the font by name to your page using either the <FONT FACE> tag or the FONT-FAMILY property in CSS1. Embedding a font is a 3-step process: 1. Finding fonts is easy. Do some research first though: some designers don't allow their fonts to be embedded. 2. 3. Attaching A TrueDoc File. Font Sugar - Only the totally awesomest fonts™ DaFONT.