Vox-ATypI classification In typography, the Vox-ATypI classification makes it possible to classify typefaces in eleven general classes. Devised by Maximilien Vox in 1954, it was adopted in 1962 by the Association Typographique Internationale (ATypI) and in 1967 as a British Standard, as British Standards Classification of Typefaces (BS 2961:1967), which is a very basic interpretation of the earlier Vox-ATypI classification. Originally a ten-part classification, Vox revised his original proposal within months to a more compact nine-part scheme. This classification tends to group typefaces according to their main characteristics, often typical of a particular century (15th, 16th, 17th, 18th, 19th, 20th century), based on a number of formal criteria: downstroke and upstroke, forms of serifs, stroke axis, x-height, etc. Although the Vox-ATypI classification defines archetypes of typefaces, many typefaces can exhibit the characteristics of more than one class. Classicals[edit] Humanist[edit] Garalde[edit] Moderns[edit]
The Ministry of Type Edward Tufte’s “Slopegraphs” After you read this post, you’ll probably want to check out the follow-up, A Slopegraph Update. Back in 2004, Edward Tufte defined and developed the concept of a “sparkline”. Odds are good that — if you’re reading this — you’re familiar with them and how popular they’ve become. What’s interesting is that over 20 years before sparklines came on the scene, Tufte developed a different type of data visualization that didn’t fare nearly as well. To date, in fact, I’ve only been able to find three examples of it, and even they aren’t completely in line with his vision. It’s curious that it hasn’t become more popular, as the chart type is quite elegant and aligns with all of Tufte’s best practices for data visualization, and was created by the master of information design. In this post, we’re going to look at slopegraphs — what they are, how they’re made, why they haven’t seen a massive uptake so far, and why I think they’re about to become much more popular in the near future. The Table-Graphic
Five simple steps to better typography – April 13th, 2005 – Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography. Call me a little bit purist but this bothers me. So, in an attempt to spread the word here’s the first of five simple steps to better typography. Measure the Measure. The Measure is the name given to the width of a body of type. One point = 1/72 of an inchOne pica = 12 pointsOne em = The distance horizontally equal to the type size, in points, you are using. But, with the advent of DTP packages and the website design the following are also now used: MillimetresPixels There is an optimum width for a Measure and that is defined by the amount of characters are in the line. CSS and fluid? What is interesting here is fluid designs on the web. The Measure and leading. Reversing out? Tracking Your responsibility The series Further reading
Fonts : Type topics: Glossary This section provides a small glossary of terms frequently used in the type world. alignment The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or centered. Flush left and flush right are sometimes referred to as left justified and right justified. ascender The part of lowercase letters (such as k, b, and d) that ascends above the x-height of the other lowercase letters in a face. baseline The imaginary line on which the majority of the characters in a typeface rest. body text The paragraphs in a document that make up the bulk of its content. boldface A typeface that has been enhanced by rendering it in darker, thicker strokes so that it will stand out on the page. bullet A dot or other special character placed at the left of items in a list to show that they are individual, but related, points. cap height The height from the baseline to the top of the uppercase letters in a font. centered character, character code character mapping color condensed dpi
Magazine columns and their layout options | Magazine Designing Columns are essential tools to standardize your layout. They will help you in getting order and structure of your magazine, but do resist to imprison your thinking into standard format because rigidity dulls the creativity. To avoid that trap you can play with column width and shapes. You should treat each story as a separate unit and mix the number of columns in each story. One story can be laid out on a two column grid while the other can be laid out in three, four or more column grid. In this article we will talk more about columns as a design element and in another separated article we will talk about the width of the columns and the number of characters that would be ideal for such columns. But let’s go back to columns as design element and take a look at several typical column sizes. The unwritten rule is to design more important stories on fewer columns. Less important stories like news sections can be laid out in 4 or more columns. One column Used very rarely. Two columns
Why designers should seek chaos and complexity first - Activeside of design verybody seem to agree on the fact that the World is complex and is getting even more complex everyday. I wouldn't discuss that, it's probably true. It seems that everyone also agrees on the fact that Simple is better than Complex and that we need simplicity in the products (material or immaterial) and services we use everyday. "Ideas are cheap and plentiful" Linus Paulin (1901-1994), awarded Nobel Prizes in Chemistry and Peace and one of the greatest scientists of the 20th century, used to say that "the best way to get a good idea is to get a lot of ideas". "Ideas are cheap and plentiful. In the field of Design, ideas is the raw material you play with before you start working seriously. From low to high resolution From order emerges chaos… When the primary material for thinking is limited to a small series of ideas, things seems to be in order, the world looks simple, the solution near : idea 1 + idea 2 = idea 3. First, the automata rule #30 develops itself as follow: All Thinking
The Medium Is The Message Advertisement Since the early days of communication, humanity has been captivated by the methods it uses to convey and preserve information. How we communicate with each other defines who we are and constitutes so much of what makes a culture and an individual unique. Over the centuries, we have seen media evolve across a wide array of channels, from print to radio to television to the Internet. The medium through which we choose to communicate matters. When it comes to understanding these various media, one of the best to learn from is Marshall McLuhan. “The medium is the message” as a phrase sums up a much deeper communication theory, which is that the medium through which we choose to communicate holds as much, if not more, value than the message itself. On The Surface McLuhan’s theory has certainly not been neglected or forgotten. Perception of a medium plays a vital role. Imagine, if you will, a deep well in the middle of a vast desert. A Real-Life Comparison Think about it. (al)
Signs of Art Graphis, the pioneering Swiss design magazine founded by Walter Herdeg (1908-1995), published hundreds of the finest covers of any design magazine. Designers, illustrators and artists of all kinds were given a relative free hand under the watchful eyes of Herr Herdeg. It is difficult to describe the joy I, for one, felt when a new bimonthly issue came through the mail in the familiar cardboard box. It was an event. Sure, there were Print and CA in the United States, and each had good covers. Most cover images were independent of any text, although most were done by someone featured inside the magazine. These were usually the most difficult. (Cover artists from top to bottom: George Giusti (1955), Lee Mason (1974), Ronald Searle (1967), Walter Greider (1966)Bertram A.
50 Stylish Navigation Menus for Design Inspiration Six Revisions Skip site navigation 50 Stylish Navigation Menus for Design Inspiration Apr 10 2009 by Jacob Gube | 39 Comments A site’s navigation menu is one of the most prominent things that users see when they first visit. In this article, you’ll find a showcase of beautiful, creative, and stylish navigation menus for your inspiration. 1. netdreams.co.uk 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 15. 16. rzepak.pure.pl 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. csharpdesign.co.uk 36. 37. okb 38. 39. 40. 41. 42. 43. 44. toby-powell.co.uk 45. 46. 47. 48. 49. 50. Related content 39 Comments Alex April 10th, 2009 Here is another one: (top navigation) Kayla April 10th, 2009 Very cool menus. Jamiel Sharief April 10th, 2009 Nice collection. David April 10th, 2009 thx for sharing! Danny Hinde April 10th, 2009 Caroline April 10th, 2009 Great list – one missing – using tag clouds as part of navigation kayintveen April 10th, 2009 Tony Creamy CSS
30 Exceptional CSS Navigation Techniques We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. The Menu menu This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. 2. View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3. View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. 4. View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. View Demo 6. View Demo 7. View Demo 8. View Demo Update: this no longer exists. 9. 10.
Adobe Illustrator 101: 10 Things You Should Know About Ai Adobe Illustrator is one of my absolute favorite applications. For vector work, Illustrator simply can’t be beat and you should really set your reservations aside and give it a shot. Even if you’re commonly creating raster graphics for the web, there are a number of things that Illustrator simply does better than Photoshop so getting to know both apps and their strengths/weaknesses is a must. Today’s article is for the extreme Illustrator newbies. A Photoshop-Centric Discussion In writing this article, one of the major assumptions that I’m making is that you’re fairly familiar with Photoshop. As I go through the tips below, a lot of the explanation will be based on how working in Illustrator is different than Photoshop. Like Photoshop, Illustrator is a huge app so we can’t possibly cover everything in one post but this is a decent overview of some techniques, tools and knowledge to keep in mind. Vector Graphics Are Magic But You Already Knew That What’s All This Crap on My Screen? Zooming