The world would probably thank Switzerland for the invention of the Swiss knife but the world could not thank it any better for the popularization of the Swiss Style. That though this famous design style isn’t originally Swiss-made, the touch of the country is still present even to the smallest detail of the design.
Table of Contents:
- Swiss Style Typography
- Learn the Basics: 22 Sites And Resources To Learn Typography
- A Brush With The Elegant Ampersand
Swiss Style Typography
Swiss Style typography, though traced from Russia, Germany and the Netherlands, was made popular by Swiss graphic designers. They have used it with many Swiss cultural institutions, political advertisements and a lot more because it was thought to have suited the drastically increasing global postwar market. It was used in street signs, maps, public service announcements, etc. In this demand, institutions, corporations and small firms needed a universal identification method that could be easily related to them. The trick was, the method should be universal enough to be understood by every citizen of the world. The Olympics was one good example of a global institutional event Swiss style helped because it has used the simplest symbols using the most universal colors possible.
Swiss style emphasizes on neatness, eye-friendliness, readability and objectivity. Its foundations go back to its strong reliance on elements of typography and universality. This basic knowledge of universal understanding made Swiss style earn its moniker dubbing it as the ‘International Typographic Style’.
Being modernist by nature, the Swiss Style served as the forerunner for the graphic web design trends. It is in this reason why it is called the King of Web Design. It can be easily identified for its immense simplicity and exhortation to beauty and purpose. These two principles are often manifested in the use of asymmetric layouts, grids, sans-serif typefaces, left-flushes and simple but impactful photography. These elements are produced in a simple but highly logical, structured, stiff and harmonious manner.
Being the King of Web Design, it is but natural that the Swiss Style would have an impact to our websites. This is why studying this design style helps web designers and graphic artists to produce impacting, simple and aesthetically arranged outputs. Designers take lessons from the Swiss styles applying the norms on simple yet artistically and clearly delivered messages by:
- Preserving uniformity and geometry
- Allowing wider spacing
- Using of grid systems
- Structuring information
- Keeping minimalism
- Using sans serif fonts
- Using different fonts sizes
- Using of effective photography
Sizes, Shapes, Swiss!
Swiss style works are generally attentive to the use of uniform design elements and geometric figures. It focuses on preserving the consistency of the shapes and their sizes. Most graphic artists practice the use of shapes collated together to form unique abstract designs. The use of polygons, rather than intricate lines and calligraphic designs assure the simplicity of the work. It also spices up the whole image, making it look sharper and purpose-directed. Aside from that, colors, text manipulations and abstract devices are also combined with shapes to produce a remarkably clear message to its spectators.
Breath in, Breath out
It has been stressed out in almost every design school that whitespace is important. Most starting designers tend to discount this fact. And that’s what separates them from the better designers. In a work of art, whitespace is a very important element. It literally and figuratively breathes life to it. Having each element in the design will produce visual impact and readability. For a web page, using this technique will subtly influence your readers to think that there is organization in the web page and could convey an impression of a better output as well.
The popular belief is that a work would be perfect if there is nothing to add to it is clearly not the ways of the Swiss design. For Swiss designers, removing unnecessary elements makes it perfect. They believe that a work will be perfect if there is nothing to remove in it. So, instead of adding elements, they do the otherwise.
Gridding is the usage of a very stable framework that allows designers to logically arrange the information they put in the page. This system, a practice that is traced up to the medieval times, enables artists to easily identify where to put information and what kind of information is to be put.
Since the Swiss Style is characterized to be logical and purpose-oriented, the usage of gridding is very much recommended as it gives ease to the designer in doing the work and gives the readers easy access to the message the work is trying to send.
It is clear that the Swiss Style is information-oriented. This is why designers should think of the information dissemination activity more than anything else. It should send the message before entertaining the people of its art. Swiss Style should be more focused on the semantic arrangement of data rather than the aesthetic placement of it. The readers of the typography should feel like they are reading rather than seeing. That they are actually studying data rather than appreciating it.
The modernity of the Swiss Style connotes a very rudimentary feel. Using minimal designs to make the reader focus more on what is really important is the main goal of the Swiss Style. The fewer the distractions, the better. Removing all the distracting elements and making the elementary and only the important details remain is the basic principle of the style. This is to ensure that the true and main purpose of the design is met.
What’s Your Type?
Typeface is the core element of visual communication. It is the most direct and easiest route for the message to be delivered. In the Swiss Style principle, it would be an abomination for a designer to put into jeopardy the quality of the typeface for the design Typefaces should be presented in the most simple, expressive, and universally understood manner. For Swiss Style artists, the usage of letters in the simplest way possible is the best way to do it.
This is why a lot of artists who are into Swiss design use sans-serif typefaces. These are fonts that do not use serifs or ‘hats and shoes’. They are commonly single stroked, meaning, they have a universal brush-width and stroke size. Common forms of this kind of typeface is Helvetica.
Does Size Even Matter?
Of course it does. Font size matters in the Swiss Style. The difference in font size and the contrasts of typefaces arrives to the impression of visual impact and hierarchy of data presentation. It suggests separation or sifting of the important ones to the less important. Normally, the larger the font size is, the more important it becomes – similar to HTML heading tags where web crawlers prioritize H1 over H2 and H3.
Foot of Photography
Though the Swiss Style is generally focused on types, it is not discounted that photographs are good elements for the Swiss design. Most Swiss designers tend to use photos than images as the former gives an impression of realism and drama to the whole design. Commonly, these photos are taken without color, meaning, black and white.
The Swiss Style follows a very simple philosophy. Less is more. Just like any Swiss product, this design style is focused on its function rather than its look.This norm should guide all aspiring Swiss Designers. You should put what is needed and nothing more.
If you have a problem with this, try talking to the Swiss people. They might help you.
Now let’s assume that you want to learn more about Typography. Then the next section is the one for you.
Learn the Basics: 22 Sites And Resources To Learn Typography
Typography has been practiced and used in our daily life. Range from handwriting in a pocket notebook to the big advertising billboard. It’s sometimes typed using Times New Roman in 12 points for newspaper. Others use Edwardian in 26 points for their wedding invitations. When a designer decide to use the right font for the right job, the typography itself become an art. Learning typography seems to be easy at a glance, in order to achieve a great impact from typography for graphic and web designs isn’t so easy. Many designers found it as a complicated design aspects to practice.
Below are the 25+ sites and resources we have selected to help you understanding typography basics in print or web designs, choosing the right fonts for your project, and guide you to create a good typography which aesthetically pleasing.
There are quite a few terms thrown around with regards to typography. Hopefully this article will help you understand more about the world of typography. If this is your first true introduction to typography you probably underestimate the effect it has on the world.
This is a series articles, each part explains deep knowledge of typography and help you to understand it more. The kind of typography in these articles is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography.
Not every typeface is the right choice for every job, this articles will help and guide you to understand and picking the right choice for different type of job or concept theme.
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.
A reference table for most popular typefaces and their classifications.
Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.
This article from Smashing Magazine gives you a broad knowledge of popular typefaces used in web design, also included with some case studies and inspirations.
Have you ever had the problem of not knowing what typeface to use? Well of course you have, everyone has. This is a guide on how to choose a font.
You can’t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. This article will give you 11 typography tips to help you convey information in print the right way.
This is an introduction for you who are still new in the design field. Its aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.
This article gives you four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.
This is an open typography forum regarding paring fonts. Get the suggestion or advice from the designers who have been professionally experienced in typography in this forum.
OpenType (OT) is a cross-platform type format that includes expert layout features to provide richer linguistic support and advanced typo graphic control. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used.
For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is not an argument against all geometric or modular typefaces, but simply some guidance on how to make them more readable, work effectively and be visually consistent.
An article which discusses both font and typeface because these terms evolved over a considerable period of time and saw several transitions in technology, they can sometimes be interpreted in varying ways. This resulted in a terminology that is often perceived as at best esoteric, at worst plain confusing.
A List Apart gives you more knowledge for typography on websites, explore choosing and pairing fonts on the web, particularly in relation to the expanded options
@font-face provides from this article.
This is another article that will help you understand type alignment for the web. It explains each on Justified, Right-Aligned, and Left-Aligned and giving the reason of which is best to use on the web depends on your need.
There are many factors that play into the readability of text. There are also a number of terms, all very important. This article explains a few of the more common Web typography terms and an explanation of how each term affects readability.
And how about setting type to a baseline grid? Learn more and practice it after you read this article, it will guide you with the easy to follow examples and codes.
Clagnut’s typography category archive is filled with great information on typography spanning the past eight years or so. Articles talking about theory, news, and technique are all included.
Picking the right typeface gets you farther than you might think. Here are a few tips on taking cues from type to design interfaces and interface elements.
Did you find that your favorite typography-related article is not on the list? Let us know in the comment section.
Also if you want to dive deeper in graphic design, web design or freelancing world, we have just finished 1stWebDesigner free training course, where we have collected all the best posts ever published on 1stWebDesigner for your convenience.
Now let’s take another step further into typography.
A Brush With The Elegant Ampersand
Ampersand is one of the very few typographical characters that has been a part of our daily lives since we can remember. It was the uniqueness of ampersand that made designers experiment with the design of ampersand. The end results at times were amazing while sometimes it was hard to recognize the outcome. I might not leave a shiver down your spine when I introduce you to the history of ampersand but believe me, it is worth your time. Today, we will dive into the past and understand how ampersand become what it is today – Ampersand. Also, we will admire some of the most amazing experimental ampersand designs that designers could imagine.
From “and, per se and” to “ampersand”
Instead of making this discussion a chapter eligible for history books, let me cut things short:
- 63 B.C. – Marcus Tullius who was Cicero’s slave started the tradition of including ampersand in his literature. Reciters would pronounce it as “and, per se and” which meant “and by itself [means] and”.
- 79 A.D. – The city of Pompeii showcases the symbol on its walls as part of city graffiti.
- 775 A.D. – The letters E and T (where “et” is Latin for “and”) were being usually written together (shown in image below) to form a ligature. The symbol used for this would soon become our very own ampersand.
Image from Wikipedia
- An interesting fact is that if ampersand was not available to be used, usually due to cost involved in designing the same, writers would use the combination of 8 and c as replacement for ampersand.
- 1111 A.D. – The symbol was unofficially included in the character set by an Anglo-Saxon monk, Byrhtferð.
- 1499 A.D. – Aldus Manutius prints Francesco Colonna’s Hypnerotomachia Poliphili using 25 ampersands on a single page.
- 1837 A.D. – It was the 17th and the 18th century when some primers started to include ampersand as the 27th character of the English alphabet. It was in the year 1837 when dictionaries officially started to include the word ampersand in their list.
How to Draw Ampersand?
I am not kidding. There are people who get confused when it comes to drawing ampersand. When you look at the symbol Ampersand and compare it with Treble Clef then you might not find much differences.
Please understand that Ampersand is a character used in English Sentences while Clef is a music symbol and Treble Clef is part of the same set of music symbols.
Now, back to drawing an Ampersand symbol. If you see the image above (Ampersand on the left section of the image) then it should be pretty clear as to how you can draw the same. Let me explain the same in words and see if you are in sync with me:
- Start from the lower right corner
- Go up and slightly to your left
- When at the top, move towards right and loop downward towards your left
- Now curl under up to your right going up.
- Continue till you cross your original stroke.
- Practice again!
Usage of Ampersand and Important Rules
While the most important usage of Ampersand is in our cell phone SMSes, there is a lot more to it that we can learn. You might already be aware of what I tell you but I assure you that you might be committing silly mistakes just because you overlooked the rules.
- Never replace “and” with & – Usually we make this mistake. While writing English sentences we tend to use “&” symbol whenever we want to use the word “and”. This is the most common and the laziest of mistakes that humans commit. I don’t because my beautiful English teacher scolded me a lot for such mistakes. *blushes*
- FACT – Did you know that “&c.” can be used as replacement for “etc.”? Well, it can be. Although, I will suggest you to avoid this in your daily life as half of the readers might not understand it.
- Addressing a couple – Mr. & Mrs. Smith! If you use “&” instead of “and” while addressing a couple then, somehow, it won’t be considered a mistake.
- Firms dealing law, stock markets and architecture – This is one usage of Ampersand which has kept it alive on the official front. Otherwise by not it might have been limited to SMS language only.
- Used to indicate a two-part name – Ampersand can be used to indicate a two-part name. An example would be – James, Mr. & Mrs. Jackson, and John.
Ampersand for Webmasters
We (the webmasters) know this already. Right? After all this is part of our bread and butter. Anyways, let me go through the same all over again. You know, just in case.
HTML Ampersand Character Codes are usually used to depict symbols that are impossible to type otherwise. See the image below to get a clear understanding of what I mean:
Well, that was lot of information for us to consume in one go. Let us ease out our minds by admiring some of the neat ampersand designs.