Ode to Ampersand: 30+ Inspiring Images of Our Favorite Character
Did you know that the ampersand comes from the phrase “and per se and?” Or that it originated around 1st century AD as a combination of the Roman cursive letters E and T? Even more interesting than its history and origin is its fantastic shape, which designers are constantly using as a muse for a new piece of typographical art.
Below you’ll find over thirty excellent inspirational images that feature ampersands as a primary element. Looking through these will help you learn to take advantage of what is arguably the most attractive character on your keyboard.
November 18th, 2010 Posted in TypographyUltimate Web Font Resource Roundup: 50 Awesome Sites
The idea that web designers ignore typography is officially dead. In recent years countless tools and services have sprung up to meet the need of making the web a more type-friendly place, and they’re succeeding.
Today we bring you a huge list of awesome websites for all things related to web fonts. You’ll find sites offering free fonts, web font services, font building tools, previewing utilities, and a lot more!
October 21st, 2010 Posted in Typography20 Bold Free Script Fonts That You Don’t Have to Be a Girl to Use
Today we bring you an awesome collection of free fonts that you can download and start using immediately. These fonts are scripts but tend towards the masculine side rather than being all swirly girly.
Give them a shot and let us know what you think!
September 17th, 2010 Posted in TypographyFontDeck: Exclusive Sneak Peek
Today we have an exclusive pre-release sneak peek into an exciting new choice for using different fonts on the web.
Below we’ll briefly discuss what FontDeck is and how easy it is to get setup on your site. Let’s get started!
May 4th, 2010 Posted in CSS, Typography30+ Gorgeous Typography Based Sites
“No other design discipline requires so much learning and training as fontography, and by no other aspect can amateurs be so easily distinguished from professionals.” – Dmitry Kirsanov
To follow up our recent article, 8 Rules for Creating Effective Typography, this post contains over 30 sites either dedicated to or designed with beautiful typography.
April 4th, 2010 Posted in Inspiration, Typography8 Rules for Creating Effective Typography
Today we’re going to discuss something that is both a hot trend and timeless art: typography. The basic rules outlined below will help you become more aware of how you structure and use typography in your designs. Being conscious of these rules can improve nearly everything you create that contains a headline or major typographic element. Let’s get started!
April 1st, 2010 Posted in Graphics, TypographyHow to Use TypeKit on Your Site: Step-by-Step
Several options have cropped up recently for adding custom fonts to your website by utilizing the @font-face selector. TypeKit is an exciting new player in this game because it stands out in two key areas: ease of use and richness of fonts available. This tutorial will take you through several small, super simple steps to get TypeKit up and running on your site. You won’t find any advanced techniques or scripting here, so even if you’re a novice web designer this should be a cinch!
October 14th, 2009 Posted in CSS, HTML, JavaScript, TypographyIntroducing Typekit
Font support on the web has long been a topic of debate. Recent years have seen the emergence of various techniques for embedding fonts through flash, a method known as Cufon, or various plays on the new @font-face CSS properties emerging slowly through CSS3.
The main limiting factor to date is that of font licensing. Understandably, foundries are reluctant to allow web designers to publicly host their font files for anyone to download. A few typefaces have been licensed for use online, but designers are severely limited in choice.
This week saw the announcement of a breakthrough system – Typekit.
May 30th, 2009 Posted in TypographyBest of 2008 – Typography
Typography is beginning to come to the fore as one of the most crucial elements of web design as people start to understand its importance. There’s no doubt that if you perfect the size, style and position of type on your page, the rest of the design will flow much easier.
In part one of our 2008 roundup, we saw some of the most useful graphic design tutorials of the year. This second section will walk you through a selection of the best typography related resources and articles of 2008 – tutorials, downloads, fonts, and everything you need to perfect the use of type in your design.
December 22nd, 2008 Posted in Articles, Inspiration, TypographyFive Tips for Better Typography
When designing online, people often overlook the need to careful consideration of font styles, sizes and colours. How you display and position the words on your page can have a dramatic impact on how long people stay on your site, and how much they take in.
If you follow our five simple steps below, you will see a dramatic improvement in the look and feel of your designs. You’ll benefit from readers spending a little more time browsing through your pages.
1. Use headings
Unlike a novel or a textbook, people rarely read your page word for word online. They scan through the text on the page to find what they are looking for. Using appropriate and regular headings can work wonders and really captivate your reader.
Ensure that you use h1 and h2 tags etc appropriately so that search engines can make more sense of your page and that it’s semantically correct.
2. Split up blocks of text
For similar reasons to the above, it is very important to split up blocks of text. It ensures that readers feel that they are progressing through the text and allows them to logically skip through your article to find what they came to. They are much more likely to stay, read through and locate what they needed when your text is easy to navigate and scan.
3. Line length and spacing
The length of your lines (the measure) is particularly important when designing your website to ensure legibility. A general idea is to try to keep your lines around 2-3 alphabets in length, or 52-78 characters. This isn’t always possible depending upon the layout of your website. It is often a good idea to ask people to read a page of your site in a few variations to see which one they read quickest, or find easiest to concentrate on.
Line spacing is also important (the vertical distance between lines). This can be altered in CSS, using the following rule:
p {
line-height:18px; }
Altering this can have a dramatic effect on how easy your page flows, and the legibility of text. Experiment and decide which settings look best for you!
4. “Style your punctuation”
By default, punctuation on the web is plain and a little boring. A good example of this is double quotes. By default, they are straight and vertical – not showing the reader whether they are at the beginning or end of a quote. With a little alteration, using the codes “ and ” respectively can give you curly quotes and result in text looking akin to those in this section heading.
5. Limit different fonts
A general rule we employ is not to use more than three fonts on any one page. One for headings and titles, one for subsection headings and one for the main body of text. Design Shack uses only two fonts throughout the website. Minimalism is key to keep the reader from being cluttered and confused, but used correctly different fonts can help to seperate sections and enhance the flow of the page.
July 5th, 2007 Posted in Articles, Typography