It's All About The Font : Web Typography

The area of Web Typography has recently felt a breath of fresh air with the innovation of the @ font-face attribute which was initially born in CSS2. This attribute was not included in CSS 2.1 and that is why in the newest CSS3, there is an attempt to bring it into the standards. This new attribute has opened the door for web designers and developers to finally be able to use decorative or more thematic fonts than the previously small and rather boring list of "web safe fonts". The goal is to make it completely cross compatible on all the currently used browsers.

To use this new font attribute, a web designer must use it for each specific font that they want to embed on the website they are building. Yet this is a small price to pay for being able to now give clients a more personal style and feel to the typography on their individual and/or business websites. The @ font-face attribute will allow the browser to download a font for rendering the page; a link is given to a remote site or a folder on the local site which the browser will access, install, download and render, so the site can be viewed in the way the designer desired. This attribute will cause a slight pause in rendering the page but as long as it's not overused, it is a very welcome addition to a designer's arsenal of web design tools.

If a web designer is trying to use mostly free fonts to reduce costs for their clients and their own web design business then they need to be aware of licensing for third party users. Many font resource sites have lists of free fonts which are licensed by the creators for web designers to use on client websites. When using these free fonts, a web designer might see that the font creator requests a link back to their name or website. Some font creators ask for small donations to assist them with their website costs and time spent creating new fonts. There are also fonts which are relatively inexpensive and when purchased give the web designer a license to use on their own website and for their clients.

Web designers can also find "hosted" fonts where their client's website will link out to the font host site. One such site: TypeFront lists the benefits of font hosting as you can have all of your fonts in one convenient "bucket". This allows a web designer more control over the domains that any of these chosen fonts can be used on. This also allows you as a designer to offer your clients more pricing options such as once-off, per domain and subscription. This is a feature that I will probably look into once my web design business is flourishing. There is quite a cachet and appeal for client's to "own" special fonts which can become known as their signature look or style.

Again, there is the trade off in the slight time delay that may occur when using a hosted font. This possible negative would have to be balanced against the potential higher expense of buying individual or font groups for each client. This is where the importance of research comes into play and networking with other web designers to find the best overall solution. Yet given the past availability of web safe fonts, this is a "nice" problem to have as a web designer. As the @ font-face attribute evolves and changes in the future there may be further innovation to where it is a seamless and efficient element to use.

Now web design also has the technology of WOFF: Web Open Faced Format, where people design fonts, then save and convert them to woff and use other technologies like (html, css and svg) to tell browsers and other software which fonts to download and apply. As web designers this is a wonderful new technology which allows us better typography for the web: (OpenType features such as contextual forms and old style figures), accessibility (real text can be read aloud; images of text cannot), internationalization (more languages can be represented), search engine optimization (SEO; real text can be found by search engines; images of text cannot) and preserve brand identity through type.

As a new web designer, I am very happy to see these new attributes and technologies emerging in the web design industry. As a designer, the thought of the past constraints on using a variety of fonts and not being able to create unique and personalized looks for clients sounds like a true nightmare. I see these new additions to web design as brilliant positives that will take web typography into a completely new realm. Most clients will be happy as well and be able to own very distinct and specialized fonts which will create signature looks for their websites. This new typography technology will greatly enrich web design and give new life to headline and textual content. It is exciting to think about the future of web typography with these new developments already in the works.

I found two websites where web designers can find free fonts as well as web font kits. They are My Fonts and Cruzine... both are easy to navigate and have some very cool fonts! I also used information from the W3 Schools website to define what WOFF is and the benefits derived from employing it. The information on the @ font-face attribute was gleaned from the W3 Schools site as well.

Moods of Norway : Experience Design

This website: Moods of Norway - is a quirky and uniquely designed site that engages you as soon as you start to navigate through the different webpages. The background image of Norway's snowy mountain peaks draw you in and it's then you start to notice the rather amusing foreground images. The hot pink tractor and fishing trawler out on the lake cause you to smile as does the burnished gold limousine which speeds easily over the snowy terrain past young couples dressed in the fashions which this site is intent on selling. At first glance, it appears that all of these design elements are meant to just attract you as a visitor to explore the site more in depth.

However, once you hover over say the little farmhouse... you see a pop up text message to "Find Stores". Now as you begin to hover over other elements in this pleasing landscape, you find that many of these objects lead you to other pages and sections of the website. This design feature in addition to the traditional navigational text buttons at the top of each webpage give the user/visitor a much more interactive way to engage in learning and potentially buying the products showcased on the site. I was immediately intrigued and amused which led me to exploring this site fully even though I would probably not buy the clothes offered here. The shoes, on the other hand, are another story and I may revisit this site to purchase a pair or two.

Moods of Norway is a website that uses experience design in a very compelling and intelligent way. This website in its overall design and elements used just begs the viewer/visitor to smile and engage in further exploration of the entire site. The limo, tractor and flying plane w/a banner reading: "Happy Clothes For Happy People" are fun and add a game like quality to the navigation. This design element appeals to the kid in all of us as we have control over the objects and are given a reward when we follow them to their destination and view the results. These design elements are equally as effective in navigating the site as they are easy to discover. There is a pop-up button that invites the viewer to scroll across the landscape and this is when you find that many of the objects are actually links to different webpages. If a visitor did not have the time to explore this website in this manner, they could easily just use the standard navigation links at the top of the site.

To me, designing with the concept of experience design in mind would involve a website that has the elements which Moods of Norway incorporates and makes excellent use of in its website design and navigation. The concept of experience design means that most of a viewer's senses are engaged from sensory, sound, cognitive recognition of the user elements for learning, exploring, navigating and elements that produce a fun or pleasant experience. I think it is fully possible to use experience design and still have a website that is efficient in its usability and navigation. Some web designers might be concerned or feel that using experience design in the way that this website does would slow down the user's ability to navigate or find what they are looking for in a timely manner. These designers might consider experience design to be more of a frivolous design concept and/or one that should only be used for more artistic/creative websites. I disagree as the user experience is what will bring visitors back to the website and to tell others of their great find regarding the particular site.

Moods of Norway is different from other websites I have explored that are similar to it in that it includes the traditional text navigation buttons at the top of each webpage. Including this traditional way of navigation ensures that all visitors will be able to navigate this site efficiently and quickly. The pop-up scroll button is also a unique feature and helps the viewer to see parts of the site that they might not otherwise notice. As the viewer is travelling within the landscape to different design elements, the standard webpages are grouped in a smaller window w/in the landscape so that at any time, the viewer can click on them and navigate this site in the more standard way. This website's design, creativity and innovation is also why it is one of the winning websites at the web design awards site: Awwards.com

Nike Better World Website: Cool HTML 5 !

The Nike Better World website uses the newest HTML 5, CSS3 and javascript to create a very unique and fun parallax scrolling experience. I chose this website because it showcases one of my favorite things: SHOES! It also gives a positive spin on many issues that I feel very strongly about which are racism, war, going green and the importance of staying physically active for one's health and mental well-being. Visiting this website is a visual treat as the homepage displays a variety of areas for you to explore.

The individual headers are filled with messages that are edgy, in your face and appealing in their bold approach to drawing viewers into engaging interactively on the site. I like the different styles of links that allow you to navigate to the pages that give more information on the main sections of the website. The designers used a combination of "Learn More" and intuitive symbols to entice visitors to further explore the Nike website. The graphics are not only of a superior quality but also create a very rich and satisfying visual experience. The collapsing sections on the information pages are a great design tool and keep the information well-contained without a cluttered appearance.

There is also liberal use of Flash in many of the cool animations and videos which allows the site to share information in a way that will appeal to the younger generations who grew up watching MTV and playing video games on their consoles and computers. A design feature that really appealed to me is the series of dots in a vertical row (on the far right of the homepage columns) that fill with the same shade of green that is used in the Nike Better World logo. As you scroll down the homepage, these dots are a great visual measure of where you are on the page as well as signifying when you've reached the bottom. To me, this was a fun and clever way to guide visitors who may not be that savvy in navigating websites. This same shade of green was used in the header titles to maintain a continuity throughout the entire website.

The designers used a fun fact to encourage visitors to register on this website and become a part of everything Nike stands for at the bottom of the homepage. This is done by telling us that we have just scrolled for 14, 149 pixels towards a Better World and then providing a link to keep up with the latest information. This design element made me smile and is a nice subtle way to increase the site's viewer traffic. It's sites like this that really inspire me and increase my desire to learn more about web design and ways to appeal to the core audience of each website that I will be building and creating. This Nike website makes excellent use of HTML 5 and its bold approach to sharing positive information on many of the hot button issues of today will appeal to thousands if not millions of viewers. This is the kind of information sharing that I want to be vitally involved in and I encourage all of you to spend some time on this well-designed and thought provoking website.