Tools And Resourses For A More Meaningful Web Typography

Tools And Resourses For A More Meaningful Web Typography

Typography is the visual element of the written word.

Sure enough, typography is everything that relates to how your written message looks, including typeface, font size, color and even whitespace around the text.

Start from the ancient cave paintings, through the Middle Ages handwritten manuscripts up to the invention of the printing press, typography developed into the form of art and technique we are all acquainted with.


“Typography exists to honor content.”
- Robert Bringhurst


Typography is nothing but an essential element utilized in the perception of a website design.

The correct use of web typography has the power of creating or breaking the whole quality concept of the web project.

The real beauty of typography hides not just in graphics, but also in its ability to build a communication bridge with the online visitors, providing them with the specific information they expect to find on your homepage.


Considering the fact that 80% of the information on the Internet is a written text, so the visual language does all the talking.

The tone of the message should go far beyond narrating a story to the visitors. In this type of communication, the balance between the visual and the verbal aspects of web design can hardly be overestimated. Thus, typography in web design allows creating a delightful experience for users before reading a word.


Understanding the numerous visual communication principles helps designers select the typography details that have more perspectives.

Armed with the knowledge of typography, graphic designers can expand their horizons and enhance a powerful tool for reaching a much more sophisticated body of work.Basically, the careful choice of typographic elements determines how people will react on your website.

The psychological effect of typography in relation to conveying a message has the power to grab attention and generate emotions reinforcing the brand message.

In fact, ensuring some strategic considerations while choosing the proper typeface should help you to go the extra mile!

The multitudes of reasons make it obvious that font and typeface selection for any creative web design is one of the major concern.




This confusion seems logical at the beginning of the work with web typography. The written content is often defined as both font and typeface, although, they are technically and historically different.

A font is, quite simple, the.OTF or .TTF file installed on your PC and used to create the text as the part of your web content.

A typeface is mainly referred to the name of the text style applied.



To put it in short, the typeface is the design,

the font is the style in which the design is delivered.

For instance, the classic style of the alphabet used in Times New Roman would be indicated as a typeface. This alphabet cast at a particular size or weight is nothing but a font.


Typographic elements for design projects can be compared to an outfit to buy: based on what you wear, people often make assumptions about your personality, your social status, your age, or even the kind of impression you want to make.

Your first concern in selecting typographic elements for a project should be that it matches your message. There are numerous options to call attention to certain pieces of your web content.


Here are just some of the strategic considerations that really matter


LEGIBILITY AND READABILITY determine the ease with which the details of a text can be recognized. Even an eye-catching typeface is of no use if each detail is not distinguishable and clear enough to catch the main message.


VISUAL HIERARCHY should be reached by means of more than one typographic elements used within the content. For instance, the headline, sub-headlines, and the main text should be marked by different fonts. At the same type, it is of no use to apply different fonts for several sub-headings, as it may break the overall consistency in the text.


FONT TYPE CLASSIFICATION make it difficult to select the one that suits your content. For example, Serif fonts are characterized by higher legibility and give the most classic look to the web content. Sans-Serif fonts can be recognized by sleeker lines and more modern look.


FONT SIZE AND SPACING play an important part in delivering a well readable content. Even if a user finds the topic interesting, he might leave the page without any concern if the font size is either too small or too big.


COLOR used in the web page has the power to increase the number of user views. While bright colors seem more eye-catching, calm colors are there to ease up the reading experience. For instance, the color applied to the headline and the main content should complement each other in order to deliver the delightful web design for viewers’ eyes.


PLATFORM INDEPENDENCE is the major prove of web functioning of all typographic elements. One should make sure that the fonts, color, contrast used are independent of the platform in which the web page is set up.


Keeping these considerations in mind, it can be fairly noticed that typography is the part of web design that cannot be left to chance!



Referring to the family of fonts, typeface is presented by multiple options used in the web design.


Here are some of the typefaces which, in our opinion, are the best assets to different types   of web content


AVENIR (“future” in French) is a geometric Sans-Serif typeface created by Adrian Frutiger in the year 1988. You could definitely see this typeface in Maps programs issued by Apple or on the cell phones of LG production.


TIMES NEW ROMAN is a classical typeface based on simple forms, firstly used by the British newspaper The Times in the year 1931.


FUTURA is a geometric Sans-Serif typeface characterized by forward appearance and based on the simple geometric forms.


PROXIMA NOVA is a relatively new but an extremely popular typeface consisting of a geometric appearance with modern proportions.


FF UNIT SLAB is characterized by a clean and contemporary typewriter-like style that looks smart in bold headlines, as well as in the major text.


DROID SANS is a humanist Serif typeface applied for user interfaces on smartphone menus, web browsers, and other screen texts.


HELVETICA is the world’s most-seen font, often used as a typeface for headlines and some classic online publications.


ALTERNATE GOTHIC NO.1 is a gothic Sans-Serif typeface originally released for American Type Founders.


GEORGIA is a transitional Serif typeface issued by Microsoft Corporation in the year 1996. It is one of the most fashionable typefaces issued specifically for digital contents and characterized by high readability and heavy letter strokes.


SAN FRANCISCO is a Sans-Serif typeface designed by Apple for its collection of the Apple Watch. Later, it replaced Helvetica Neue as the system typeface on OS X and iOS.

Want to expand your knowledge and develop new skills in the art of typography?

The web is an amazing thing offering various resources and tutorials for people wanting to learn more about typography and all related subjects.


Have a look at the following online typography resources full of useful information and inspiration for you


 Try.typography.comassociates with a fitting room for typefaces, where users can select fonts from Hoefler& Co.’s catalog and play with it by testing various sizes, colors, line spacing, etc.The web tool has certain limits for designers, while students or, indeed, working web designers are offered professional tutorials on the fonts and the typefaces.


Type Nugget is a web application for creating beautiful and well-crafted web typography. A settings panel allows adjusting font settings (e.g. family, color, weight, style, etc.) individually for headings, sub-headings, appendix, links, and lists. It operates over an extensive external font list with different CSS controls allowing to tune your way to attractive web content.


Font Flame is one more web application allowing to discover new pairings of web-based fonts. It is often described as “tinder for font pairing”.


As you could see typography is more than just selecting a font or a point size from the drop-down menus on your smartphone or PC.

Following typography’s long legacy, it allows making your type look more attractive in various web design based projects.


At the same time, nothing can compete against a good design eye of a web designer.

This means that your eye is the best tool allowing to proceed with improvements in your design over time. By developing your personal style and ability to specify strengths and weaknesses in design, you finally manage to set a high bar for your work.

Listen to the sound and to nality of your message, so your website visitors can form an impression of the entire web page at a glance.