Archive for the ‘Typography’ Category
Сhosing font face is one of the key steps in designing website or any other UI. One of the main disadvantages of typography is a relatively small number of font groups. Unfortunately there are only four of them Serif, Sans Serif, Script and Decorative. But each one of these four groups includes great amount of fonts that it makes pretty hard to pick the most appropriate one.
Eventually, when you picked a font for your design, the result may not seem to be satisfactory. In this case you can make use of various jQuery typography plugins that will certainly give you some super useful features and allow to manipulate web text like never beforeand perform this with a bang. Today’s blog post rounds up 12 of the most unique typography plugins that allow you to fine tune your type as well as create some cool effects. Feel free to use them.
***
TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you! Also, don’t forget to check out delicious curved text using jQuery Bacon.
***
jQuery typesetting plugin balances the measures. Depending on the amount of text in columns they will be either contracted or expanded.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function(){ $().hatchShow(); }); jQuery.fn.hatchShow = function(){ $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){ var t = $(this); t.wrap("<span class='hatchshow_temp' style='display:block'>"); var pw = t.parent().width(); while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+"px"), function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+"px")}}; }; }).css('visibility','visible'); }; jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));}; </span></script> |
There hasn’t been much focus on the art of designing e-mail newsletter layouts. The process does not require as much intensive work as building an entire webpage or CMS theme. You can make a single-page email template and copy out the styles to work in a myriad of situations.
For this tutorial I want to present a demo newsletter for Template Monster and explain some of the techniques we can use. The codes are more focused around rendering properly within e-mail clients such as Outlook, GMail, Hotmail, and Yahoo! Mail. This means we are building on top of HTML tables because the other methods for constructing layouts just do not work.
Live Demo – Download Source Code
From Humble Beginnings
I like to start email projects by looking over the HTML Email Boilerplate template. This provides a lot of helpful CSS styles and basic table structures for making your own template. There are so many odd browser quirks for rendering e-mails that you could spend weeks studying them.
I try to be reasonable and only keep the CSS classes that I am going to use. This boilerplate is full of code comments which explain why you should be using certain properties or elements. If you are unfamiliar with email design then this is definitely a good place to start. My own demo will use the same XHTML Strict doctype which is also used by Google Mail.
People have become so engrossed in daily races. We often need some mental rousing to feel that wave rising up inside us, breaking out of the ocean of subconscious. Inspiration can come from great amount of sources…some use music…others movies…nature outside the window…art works…food…animal world. Fresh gulp of inspiration can catch you in the most unexpected place, just don’t loose it.
No matter how broadminded person you are, you can definitely expand you mind abilities even further. But how can you set the stage for it?
- reading – books help one get all the knowledge they need considering all spheres of life;
- knowledgeable personalities – giving a piece of advice is meat and drink to them, all you need is to “open your ears wider” and listen.
Thrilled about quotations of “big headed” guys? Today there is no need to look through the internet trying to grow ideas from these “sayings”. Doesn’t matter if you are designers or not some of these quotes or phrases will definitely inspire you to move forward and think creatively. Make your inspiration bubble up with these 45+ web design quotations. No cliched stuff, just pure beautiful messages about design and purpose.
* * *
Good design is all about making other designers feel like idiots because the idea wasn’t theirs
Frank Chimero
Design is easy. All you need to do is stare at the screen until drops of blood form on your forehead
Marty Neumier
Every child is an artist. The challenge is to remain an artist after you grow up.
Pablo Picasso
In design man becomes what he is. Animals have language and perception as well, but they do not desing
Otl Aicher
Design from the spine and you’ll be fine
Carl Heaton
Have you ever been distressed by inclement using of fonts on your computer? Have you ever got angry when you have to spend the whole investigation just to find out how to make a simple operation with the text? Oh, you just didn’t know about font managers.
But let’s leave this commercial style, I’m not trying to make an advertisement.
First of all, a quick definition. Font manager is a tool that facilitates handling with fonts. Instead of working manually and wasting precious time a user can easily install and uninstall fonts, browse and preview any number of them (saying objectively, that is really needful if the amount is large). And these are features by default, developers are always trying hard to make use of their font manager utilities as comfortable as possible. Some interesting extra features, just for example: search for needed fonts; organize fonts by groups and libraries; sort fonts according to different criteria etc.
Wait. I’m sorry: most probably you are a web-cognizant person, or even a pro web-designer, that’s why you don’t need any noob-oriented explanations.
But still, you are reading this article about the font managers, so I dare to assume that you’re not satisfied with your current font tool (in case you have it: strange, but some web-guys really don’t know about that water in the typography desert) and you are searching for some helpful info that is guaranteed to improve and ease the process of working with fonts. Well, I’ve made research and below there is a list of the top font managers with detailed descriptions. I hope, the information will be useful for you, but anyway you’re always welcome to leave comments if something is missing.
Commercial Font Managers
License: $34.99
OS: Mac OS X 10.6 or later
Awards: Best Mac OS X Leopard Student Product 2009 Winner
Fontcase font manager elegance is not a cunning move to attract more clients, but just a nice addition to high-quality font tool. Still, the beauty of Fontcase interface is the main appeal for me (honestly, I didn’t know the simple process of fonts previewing can be designed so pleasing to the eye). Also I must mention about such useful and original feature as Typedia integration, which makes an organization of the fonts in the library really interactive and even a little bit social.
* * *
A lot has already been said about mobile web design; numerous battles took place considering the necessity of this type of websites. Still there is no clear answer if we need them or not. Those who got used to them still provide constant updates of their mobile web resources. Others consider them simply time killers, because we can all benefit from an amazing responsive website designs that nipped in the bud the necessity to build mobile websites.
We can say that mobile websites simply evolved into apps. Nowadays all large websites have their own apps developed for specific mobile platforms. Simply downloading this app and logging in you get “almost full” access to your content preserving original fonts and their readability. Top 5 downloaded apps are the following:
- Google Earth
- Shazam
- Nettflix
Still, when designing a responsive website you need to be sure that your typography is responsive and will perfectly fit in smartphone layout remaining fully legible. Here web designers can benefit from some plugins and tools that will make texts fully responsive:
Simply adding this plugin into your website your headlines will become responsive.
***
Fittext is a lightweight jQuery plugin that allows to turn website typography from static to responsive.
***
Typography in web design is an extremely challenging task since it involves a lot of creativity and sensibility. Fonts must be relative to the content and need to chosen carefully, especially the ones that are used in the header/title of the web page. The header is the most visible part of the whole website, if user sees the font that is uncomfortable for his eyes, he or she may leave the resource at once. To have a professional typography in the design is a great idea but only when it is performed with much skill and efficiency.
In this post we made a round-up of TemplateMonster’s templates to visualize the efficiency of typography as a mean to grab user’s attention. In these examples your will see how our designers use tracking & kerning as well as leading techniques to stir up user’s interest towards the content of the template. In the following examples you will see practical application of these techniques and in the end of the post you will also find other impressive typography effects in templates and several examples of logo reveals where typography effects that play major role in the whole presentation of the content.
Tracking & Kerning in Typography and Website Templates
Tracking is a horizontal spacing between letters. It can be used to slightly tighten a paragraph to remove widows or orphans in text or add very loose spacing to create more artistic effect. Changing the tracking directly may affect greatly the readability. This technique works best in large blocks of text when letter spacing is altered slightly. In projects where type is used as more of an art element, loose or tight tracking techniques can be very effective. We should mention that tracking in typography is frequently mussed up with kerning, both methods control the type spacing and refer to the adjustment of spacing between characters. The difference is following: kerning allows to adjust width between two characters, tracking adjusts the spacing between all characters in the line.
***
***
Architecture Flash CMS Template
True: learning Photoshop was never easy. But thanks to many Photoshop tutorials available online, anyone can harness Photoshop skills and learn something new. The acute shortage of good text effect and typography Photoshop tutorials is the main reason why we compile the following list. These fresh typography tutorials will offer you the guidance over creating visually sharp typography elements with vibrant splashes. Note that even the subtlest effect is capable of affecting the overall design – the featured examples will surely do the trick. Try the interplay of the overlapping text and spectacular graphics and you’ll easily define the important objects of note within your poster, website, or promotional material.
* * *
How to Create a Steampunk Type Treatment in Photoshop
* * *
RAWZ Light Effects in Photoshop
* * *
Music Equalizer Text Effect
* * *
Using big font size to get visitors’ attention is nothing new. With following designs, font is also the most important part of the designs. It may be followed by the second most important items – images, graphics, layout style or whatever, but such visual hierarchy clearly tells the visitor how each page is meant to be viewed. Users’ eyes are drawn to the most important element on the page – big font – and the larger the font size is for every single element here the more important it appears. You would probably agree that if to attempt to make everything on a page emphasized, it’s that easy to end up with a page that has very little appeal or, even worse, blend everything into a boring muddle. Here we have web designs that are using typography to get attention. Using big fonts is actually a good way of performing this task. We’ve however tried to gather designs that don’t go overboard with this technique. Today’s website and template examples simply choose the right font to compliment the website’s style and make it attractively over-sized to establish certain one-of-a-kind mood.
* * *
Giftrocket.com
* * *
Arbol.com.au
* * *
As you may know enhancing your website usability can turn up a real headache, especially if you don’t imagine where to start. Many web masters on the net claim that design begins with the proper typography. And today we are touching on the subject of typography as a tool for enhancing usability of web projects.
Whether you are a newbie or an experienced web design guru, there is always something new to discover about improving your websites to bring more regular visitors.
Below you will find some interesting facts about usability, legibility and readability as well as recommendations about selecting fonts, font sizes and other parameters in a proper way to make your pages more readable.
Components and Mission of Typography
According to the stats 95% of web information is written language which requires good shaping. Typography is actually all about shaping this information. Logically enough typography affects reading. Typography is known to affect legibility and readability of text. It defines the comfort and speed of reading and emphasizes the proper ideas.
You may select the type for its rhythm, style, mood and legibility which are being set by font type, size, spacing, kerning, orientation etc. The text features such as margins, line length, word choice and pictures placement into the text body can also affect reading.
You should also consider the flow of the eye movement through the body text. According to eye-tracking visualizations there is even specific F-Shaped pattern for reading web content. This means that users follow two horizontal stripes and a vertical stripe instinctively, so it’s highly desirable to place all important information right in that area.
Legibility and Readability in Terms of Web Design Usability
Recently we fell across an interesting material about BBC experience of playing with text in different languages. They conducted a research about what font would be the best one for various languages and made a conclusion that Nassim is that very font that meets the typographic hierarchy they need. They worked out the customized editions of Nassim (c) for Arabic and Persian versions of BBC website. The font has been created by Titus Nemeth in 2007. This search proves that each language requires specific typographical approach. You should work at the letterforms to make them look exquisite and recognizable by the audience. This can be achieved by creating the font to look anatomically and stylistically outstanding and at the same time readable. That is their recipe for improving user experience and usability.
Being one of the cornerstones of the web design aesthetics, web typography has moved forward and now any professional web designer can be armed with various online tools. We all know how important the striking typography is and how crucial it may be in terms of influence and the visual appearance of the website. Now the designers can create their own fonts and easily embed them just by pasting some special code snippets or using the existing pieces of CSS code. So embedding awesome typography has definitely never been as easy as it is today.
In today’s post we’re proving just that – we’ll present a list of tools that will help you easily improve your design’s typographical aspect. These are real time savers for web professionals and we’ve tried to collect tools that cover various aspects of web typography creation and implementation. Well, let’s start and of course feel free to share your favorite web typography tools that we may have missed.
1. PXtoEM
Size always matters especially when you are going to choose appropriate font’s size for your new design. PXtoEM calculates conversions based on your body font size, offers special calculator for your custom needs and delivers CSS file for the style you have chosen.
* * *
2. Type Navigator
This is a font visual search system which helps you to identify unknown fonts giving a proper information about font name and sometimes even about the designer who have created this font.
* * *
3. Flipping Typical
Flipping Typical is a very original tool that offers unique option to choose from different typography styles by looking at all of them at same time on one page. Just put the text in the box in a header and make a right choice.
* * *
Featured Templates
Advertisement
Follow TemplateMonster Updates
Rss Feed:Recent Comments
- Excuse my ignorance but I was wondering where i could find the...
- @google-6a59bc2e012cbd9af0bdb7 32262004bb:disqus...
- i love the effect. Where to find how to make it? work like this...
- Now a Days Its Most effective platform in mobile app...
- That’s correct!
– by the way, Thanks Alex...