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

//// COLOURlovers :: motor ave. #D94664 Log In Sign Up COLOURlovers Search Create Explore Millions of Colors You'll find over 7,353,328 user-named colors to kick start your creative projects.Get the latest colors RSS feed or name your own colors. New Most Loved Most Views Most Comments Most Favorites AllMonthWeekDay Browse Colors by machine head Hex Loves View Favorites Comments pinkisly delight by @ivy_nacua Views purple power Leaving You by Halifax Leaving You Helpless by scovanessa dd0e86 by jacobcatalfamo Helpless de0857 by basicstuffx 33ffdb Recent Color Comments soniapbgomes Posted 54 minutes ago RE: Up in a tree Posted 56 minutes ago This is part of the Daily Random Colour Challenge Saturday, 12th of April 2014, the colour is: Up in a tree #709E3A PS: Items using past IFRC colours can be submitted to the ANYRC page RE: Up in a tree shall314 Posted 2 hours ago 8-) shall314 wrote: RE: Blotter Paper RE: Blotter Paper artsykerley Posted 10 hours ago so beautiful, RE: I breathed pink ramcatluvr Posted 11 hours ago Thanks for all the love on this color! RE: PowerPurple mobooksnart

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.

Future of Web Design 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:

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

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. However that example is bad as line-height should never be applied using absolute units such as points or pixels. 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. In this example the value of line-height is a multiplier: 1.25 x 12 = 15 pt. It should be noted that some browsers add a little leading by default: Safari and Internet Explorers for example; whereas others, such as Camino and Firefox, do not. this is an example of negative leading

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

DaFONT 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