Designers tend to be perfectionists, as everything they do has to fit in place precisely the way they intend it to be whether based on concepts or imagination. Most browsers tend to default to Times New Roman or the likes, which does not quite blend in with sleek, imaginative, and very creative designs.

With that said, creative designers always search for new fonts and techniques to improve and implement their favorite typography to their websites. Below we’re excited to cover 7 helpful tips on how to improve the typography of your websites.

Contrast and Color

Color and contrast are a very important piece to the typography puzzle. Many tend to keep typography color in the same color wheel as their main design is. For instance, having a dark blue background means they tend to set a light blue typography color. Sometimes this is an issue as the colors may blend too much making it viewable but rather difficult to read causing eyestrain.

For your readers or viewers, this makes them less inclined to read articles or to browse around your website for a longer period of time. Therefore, the color contrast between the background and the foreground text or typography should generally be quite significant to keep things apparent, like black on white, or white on blue.

Font Size

The font size is a very important key to keeping text readable, clear, and precise. A general tip is to keep font in a comfortable cushion where it is not too large that can cause unnecessary used space, but not smaller than a usual textbook font size.

A good way to emphasize your body content from your sidebar or side-focus content is to generally have the font size of the body content larger than the side content as your viewers will spend more time reading the body text than the side text.

Therefore, keeping the side content out of focus from the body content enables the viewer to easily browse and read about, this is also referred to as a hierarchy between content.

Emphasis

Let us look back at the hierarchy concept discussed earlier, by it, we can easily identify between many bodies of text. For example, if the largest text in size on your web page is up top, while other bodies of text are significantly smaller, your eyes will naturally land on the larger object, in this case the larger text size. What this means is, by emphasizing certain keywords or text blocks, you increase its visibility across that page.

With that said, throughout your body text, highlighting or emphasizing key aspects from your text helps keep your long text blocks clear and understandable. Additionally, it gives your design or website a nice touch to the typography, keeping it unique and organized at its best.

Proofreading

Proofreading in this case does not correlate to assuring your text contains correct spelling and is grammatically correct, but rather correlates to tying the misconnection between your design and the typography. Typography is not always about how it looks from a design perspective but also how it appears in clarity and readability when it comes down to actually reading the text.

Many usually tend to post a dump of the lorem ipsum dummy text and make it look good at a design perspective, but do not actually go in depth to the reading level to read the text to understand if their implementation of the typography is actually suitable and comfortable for reading. With that said, do not just style and layout the typography based on what looks good for the design, but also assure the typography is clear, well spaced, and organized for the general audience to easily read through.

Too Many Fonts

I have seen this as a commonality across many websites as if the designer was a kid in a candy store and decided to pick out one of each to put in their baggy. We all have bundles of favorite font faces and we tend to use many of them across many different projects. However, using multiple font faces causes confusion to your reader, as each font face has its own style for each character, making it difficult for them to read through. Instead, stick to one or two font faces across your website, and use your favorites for other projects.

Good Whitespace

Cramming everything together is a viewer’s nightmare, let alone a pet peeve to any designer. Leave a good whitespace gap between sets of text to keep other bodies of text the viewer may not be reading out of focus from what they are reading. This generally helps viewers from running on to different segments of text or from unintentionally skipping lines. Remember, spacing is key to good readability, so use whitespace wherever needed.

Use Font Stacks

You may have a favorite font face and decide to use it on your website, however, you need to understand that not everyone may have that font installed on their system or device, thus, it will not display properly. Instead, use CSS’ font stacks rather generously as a fallback to your viewers that do not have the font you originally intended the website to use.

A good fallback font would be something similar to what you implemented for utilization, and a fallback to that would be a font that is generally used across most platforms and devices. It is a great way to assure your website’s typography does not significantly change across different platforms and devices, leaving your typography exactly or close to the way you intended it to appear.

Overall typography for the web is an interesting topic with many tips and DO’s and DON’T's arising across the web. The main thing to note is that the way the typography appears should be user friendly as well as compliment your website’s design. This includes color and contrast, size, font face, and the likes. Do not overdo it and complicate it with the typography, but also have it fit in with your design well enough for it to look great as well as be great for your viewers.

It doesn’t matter whether you are a seasoned Photoshop pro or a novice, there are two things both levels have in common – a passion for learning new techniques and a huge desire to improve their skills. And as far as Photoshop tutorials go, text effects are one of the most popular techniques designers choose to follow, and in this round-up we have chosen five in which we are sure you will love.

Create a Retro Sci-Fi Movie Poster in Photoshop

If you are a fan of of sci-fi movie art, then you will love this intermediate Photoshop tutorial.
Create a Retro Sci-Fi Movie Poster in Photoshop

Urban Type Art – Photoshop & Illustrator Tutorial

London is hip again, and in this tutorial Holland-based designer Bram Vanhaeren shows you how he created a new piece that draws on all that’s great about the city – taking inspiration from the Olympics, underground club scenes and the city vista from up high.
Urban Type Art – Photoshop & Illustrator Tutorial

Create a Cosmic Scene with Photoshop and Cinema 4D

In this Photoshop and Cineme 4D tutorial, you will be shown how to create a space composition, exploring techniques for creating 3D text in Cinema 4D, a glass effect in Photoshop and a slew of different light effects.
Create a Cosmic Scene with Photoshop and Cinema 4D

Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

In the tutorial, you will shown the processes used to Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop. This is an intermediate tutorial so some steps can be tricky.
Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

Make a 3D Colorful Abstract Text Effect

Make a 3D Colorful Abstract Text Effect

By Paul Andrew (Speckyboyand speckyboy@twitter).

For today’s news we have collected our favorites design and development related freebies from the the past week and thought they were that good, that we simply had to share them with our readers.

“Buddycons” – Vector Social Media Icons

The icon set is called “Buddycons” and includes 126 vector social media icons. Included in the set are PNG versions of all 126 icons in both circular and rounded variations as well as a vector source file for easy resizing. The icons are free to use for personal and commercial usage, however, redistribution is not allowed.
“Buddycons” – Vector Social Media Icons

Free PSD Templates: vCard Personal Portfolio Minisite

This PSD design comes in 4 pages: Homepage (About), Works (Portfolio), Portfolio Pop-Up, and Contact.
All the pages are in Photoshop (.PSD) format with all layers neatly organized in layer groups for easy identification and editing of the logo, text and graphics.
Free PSD Templates: vCard Personal Portfolio Minisite

Modernist: Free WordPress Theme with Focus on Typography

This theme supports widgets, is SEO optimized and has clean and documented code. It loads very quickly, and has various WordPress 3.0 features. Works in IE 6+ and all versions of Safari/Firefox/Opera. The theme is absolutely free to use in private and commerical projects.
Modernist: Free WordPress Theme with Focus on Typography

Typominima: Free typography based minimal WordPress theme

Typominima is a free typography based, gorgeous, minimal WordPress theme fit for the writer inside you.
Typominima: Free typography based minimal WordPress theme

Coda Shortcuts Cheat Sheet (PDF)

Coda Shortcuts Cheat Sheet (PDF)

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we have a collected a selection of articles that focus on logo inspiration. From the collection below there are well over 150 logos, covering many different styles (ambigrams, music, business…) and all have one thing in command: They are all creative and inspirational.

35 Creative Ambigram Logo Inspiration

35 Creative Ambigram Logo Inspiration

30+ Music Inspired Logos

30+ Music Inspired Logos

30 Fresh And New Logo Designs

30 Fresh And New Logo Designs

Creative Logo Design Ideas for Companies

Creative Logo Design Ideas for Companies

45+ Creative Logo Designed With Text

45+ Creative Logo Designed With Text

By Paul Andrew (Speckyboyand speckyboy@twitter).

As web designers we all love searching for great new resources, browsing some useful and relevant tutorials and we especially love them as most are free. Sometimes though, we need something more, something that will set your mind alight and for you to consider it a darn good read. And that is what we have found for you today, four web design articles that are well worth your time. So, grab yourself a cup of coffee and take the time to enjoy them.

The Web Strategy Pyramid: A Well-balanced Web Strategy

Remember when mom always told you to eat your vegetables? Little did you know she was giving you fantastic advice for managing your Web strategy. In these days of Twitter, Facebook, forums, blogs and more, it can be tempting to skip over the basics and dive headfirst into an oh-so-tempting dish of social media or SEO "tricks."
The Web Strategy Pyramid: A Well-balanced Web Strategy

How To Control Flow Within Your Web Designs

Think of your favorite song. In all likelihood the sound rises and falls throughout, the pace quickens and slows, and the rhythm and melody lead you to hear chords and notes that are about to be played. Music has a flow that guides you from one moment to the next. This flow can impart different emotions and have you feeling different things at different parts of the song. In fact, without that flow, there is no music.
How To Control Flow Within Your Web Designs

The Solar Method (of building websites)

In this post,the author tries to express what he believes to be a healthy candidate for the title of Website Building Standard Method. He calls it the Solar Method (of building websites).
The Solar Method (of building websites)

Web Designers, Don’t Do It Alone

Whether freelancers, small agency founders or website owners, too many of us work alone. The downside of the digital revolution is isolation. The Web allows us to do alone what previously would have required a team of people. It also frees us from the constraints of geography, allowing us to work from home. But while these are benefits, they also leave us isolated.
Web Designers, Don’t Do It Alone

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we have collected some of the best and freshest Photoshop text effect tutorials. Text effect tutorials are one of the most popular sought after learning categories for PS, and as such there hundreds upon hundreds of tuts of varied degrees. We have picked our recent favorites, you can see them below.

Elegant 3D Text Effect

In this tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths.
Elegant 3D Text Effect

How to Create Cool Water Effect Typography

You will be shown how to create a cool water typography effect in Photoshop playing with stock photos, blend modes and filters. You will also use some water splash brushes and smooth gradients to give a splish-splash feel to your design.
How to Create Cool Water Effect Typography

Colorful Plexi Text Effect

In this tutorial, you're going to be shown how to create a cool looking colorful Plexi text effect. Throughout this tutorial you’ll create letters separately, getting some help from the Actions.
Colorful Plexi Text Effect

How to Create an Incredible Typographic Illustration

In this two-part tutorial, you’re going to learn how to bring a simple proverb into a complex typographic illustration that achieves a level of realism without actually using any photos.
How to Create an Incredible Typographic Illustration

Awesome Text Effect

In this 12 step easy to follow tutorial you will be shown how to create this cool text effect using a basic distortion filter.
Awesome Text Effect

By Paul Andrew (Speckyboyand speckyboy@twitter).

The challenge for any web designer is to create style sheets that are unique, distinctive and can be replicated in a way that will create brand recognition. To that end, the future of CSS typography is an ever evolving and changing field that is constantly being updated, altered, and manipulated to both meets the growing demands of clients and the challenging demands of the market.

CSS Text Level 3 is the latest effort to bring the necessity of form in alignment with the yearning for creativity that web designers require. This system provides designers with finer control and power, bringing into the forefront many of the typographical standards of pre-computer printing. There are multiple features and functions in this dynamic program that make it stand out above the rest. In many ways this CSS is ahead of its time and many browsers are working to catch up to the power of the program. 

While some browsers do not support the new properties and techniques of CSS Text Level 3, more browsers are making the move to this dynamic system. As designers fine the inflexibility of styles sheets and the multiple classes and IDs cumbersome and hard to maintain, the more easily defined shorthand utilized by Level 3 provides a must more appropriate medium for designers. 

The new system uses “short-hand” for much of the commands that normally require the inclusion of multiple levels of infrastructure. An individual can easily create a design that can easily be maintained, changed, or altered to meet the needs of a client with minimal effort or duplication of efforts. 

The main areas of control are found in the capability to more precisely control font properties, white space, line breaks, text wrapping, work wrapping, word and letter spacing, indentation-hanging punctuation, web fonts and decoration, alignment and hyphenation. Overflow of text is easily controlled as well as the unicode range and language making it easy to develop language sensitive topography. 

Web designers wishing to more precisely control fonts and structure will find that using the font shorthand of the Level 3 saves time due to the order of properties. While values not specified in the order of properties are replaced by the parent value of the system, an individual can identify font-style, font-variant, font-weight, font-size, line-height, and font-family. The font property can be used to specify custom system fonts for caption, icon, menu, small-caption, status-bar, and other values that are based on the system in use. Therefore, there is not an issue with a gap in the structure of the page that is being created. 

The font-weight control allows a person to specify the weight of their font between 100 to 900. When no weight is given, the system will default to the parent weight. In Firefox, the font-size-adjustment feature allows the designer to specify the aspect ratio of type. In addition, the text-transformation feature can be specified in short-hand of font-variant such as small caps. 

The White space, line breaks and text wrap specifications allow the designer to specify combinations of properties to enhance and create distinctive designs. Using a series of short-hand commands, the page can be set up to function independently. Line breaks, wrapped text, preservation of formatting, and line breaks are easily achieved using simple codes that are easily updated, changed, or maintained. 

An especially convenient and time-saving feature of Level 3 is the word wrap or break function. The feature is not dependent on the text wrap code being set and when words are too long they will break randomly and optimize to fit the flow of the text box. 

Kerning is another feature that is much easier to set. Work and letter spacing have often been dependent on specific variables of the text, box, or page. With Level 3 there are three types of kerning, optimal, minimum or maximum. Work spacing corresponds to one optimum value or two values, one being the optimum and minimum and the second value being the maximum kerning. When no values are selected, the optimal value is used. Letter spacing utilizes one value which corresponds to optimal, minimum or maximum. This is extremely convenient languages such as Chinese, Thai, Korean, or Japanese. 

The future of CSS typography encourages web designers to step beyond their comfort zone and experiment with an incredibly flexible system that will provide the freedom to try new approaches in design and develop of dynamic web pages. One of the characteristics of great web designers is their constant efforts to grow and become more proficient. They are constantly looking for new and exciting programs to make the product they create more dynamic and vibrant to the market and their customers. To that end the CSS Text Level 3 is the natural progression in the steps one takes to perfect their craft.

Limiting your design range to reusing the same font on project after project doesn't go for making a decent body of work. It is essential that all designers have a good library of fonts that they can rely upon. Unfortunately, a lot of the best fonts are pretty expensive for freelance designers, and as such we have listed below the best and freshest font collections that we could find to help you out.

40 Free Fonts Ideal For Retro And Vintage Designs

Vintage and retro style designs can be a beautiful thing. By using a combination of rough textures, grungy patterns and brushes meant to add a scratched or used appearance, designers can easily pull of the antique look. To compliment this aged appearance, it is important to use the proper typography to help match the style you are trying to represent. To help you out, this article has a collection of 40 attractive retro and vintage fonts to use in your designs.
40 Free Fonts Ideal For Retro And Vintage Designs

20 Fresh High Quality Free Fonts

In this selection, from Smashing Mag, they present the new free fonts Kilogram, Adelle, Ayita Pro, Hattori Hanzo Typeface, Andron, Tertre, Luxi Sans, Sapir, Otari and a few more. Please read the license agreements carefully before using the fonts — the licenses can change from time to time.
20 Fresh High Quality Free Fonts

100 Fantastically Free Business Fonts

In this post you’ll find some great serif and sans-serif fonts that are perfect for use in situations involving small to medium sized business clients (in other words, they didn’t include any fonts that make you want to cringe or that you’d be embarrassed to work with).
100 Fantastically Free Business Fonts

50 High Quality Funky and Groovy Fonts for Your Designs

50 High Quality Funky and Groovy Fonts for Your Designs

By Paul Andrew (Speckyboyand speckyboy@twitter).

A couple of days Google introduced the Google Font API and Google Font Directory to everybody.

The Google Font API provides a simple, cross-browser method for using any font in the Google Font Directory on your web page.

The fonts have all the advantages of normal text: in addition to being richer visually, text styled in web fonts is still searchable, scales crisply when zoomed, and is accessible to users using screen readers.

Here are some Google Font API resources to help get you started:

What are the Google Font API and the Google Font Directory?

The Google Font API helps you add web fonts to any web page, and the Google Font Directory give developers a selection of high-quality fonts when using the Font API.
Google Code Blog: Introducing the Google Font API & Google Font Directory
What are the Google Font API and the Google Font Directory?

Getting Started with the Google Font API
This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

Google Font Directory

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.
Google Font Directory

Google Font Previewer

This tool allows you to preview and sample any of the Google fonts from its directory.
Google Font Previewer

By Paul Andrew (Speckyboy and speckyboy@twitter).

Typography plays a vital role in the quality, usability, and perception of a website design. When you’re able to embed a professional type into your design the general consensus is your website will look much more organized and legible. And when you make use of creative fonts and styles, it tends to grab attention and leave a unique impression in the minds of your users.

This makes either one of these a feasible choice for the style of typography to use on your website, however, choosing which one depends entirely on the designer, the services or products you’re marketing, and the message you’re striving to convey.

Below we have a professional and creative list of websites with amazing typography for your inspiration.

Big Cartel

Radiiate

Mutant Labs

Tobias Baeck

Matt Dempsey

Catch A Pixel

Squared Eye

Edit Studios

Forty

Brooklyn Fare

Deaxon

Adlucent

Kidd81

Hull Digital

Epic Event

Jon Brousseau

Carsonfied

Festival Boreal

Parent Investment

Four24

Monty Industries

This By Them

FutonMedia

Things That are Brown

Elysium Burns

Type Kit