Email and Typography: 5 Rules to Respect

Email and typography: 5 rules to respect

Have you ever thought about the typography you use for your emails?

This small detail, which you often delegate without thinking about your email software, could however significantly modify the impact of your messages …

Prefer the Standards

It is in the old pots that we make the best soups … and in the most common typography we pass the best messages.

Unlike a poster, or even a web page, you can not just force your recipient’s email software to read the special font that you have specially prepared for the occasion.

If your font is too specific, it will be automatically replaced.

It is therefore easier to remember directly a typography that will be read everywhere:

  • Arial
  • Geneva
  • Tahoma
  • Verdana
  • MS Trebuchet
  • Helvetica
  • Georgia
  • Times New Roman
  • Palatino
  • Courier

All these fonts will not move regardless of the device used by the recipient of the message.

Leave the Serifs to Printed Documents

On a screen, Sans Serif fonts remain the most readable. While some users advocate using serif typefaces for the longest mails, this practice remains little applied to the use.

The main issue of a message remains legibility, the Sans Serif remains the most effective solution for a screen reading, regardless of the size of the latter.

Write Big Enough

Since we are talking about size … The body of a message can not be written in characters that are too small, except to want your recipients to wear their eyes to read it (which they will not do unless you are their old grandmother to whom they forgive everything).

We advise you to choose characters between 14 and 18 pixels high (16 being a good average). Titles, they can be larger: between 22 and 28 pixels high, to make a real difference.

Conversely, your signature may be in smaller characters (12 pixels), which will distinguish it from the rest of the mail.

Guide the Eyes

We started talking about email titles.
As with any document intended for reading, your messages must respect a certain hierarchy, always in order to facilitate reading.

So you will use titles, even subtitles, you will add space between paragraphs, which will be aligned on the left. These simple typographic layout rules will greatly improve the reactions to your mailings.

Limit the Number of Fonts (and Their Colors)

It’s tempting to choose other fonts for titles than for the body of the text. Even to put these in color, to better differentiate them. And you have every right to do it. As long as you do not abuse it.

You write an email, you are not preparing a psychedelic Christmas tree with a child of 5 years.
Two different fonts (three at most) will be more than enough.

And it is the same for the colors (at least in the text): book them to highlight the links, and limit their number.

These rules apply for all types of email: personal, professional, as commercial.

This does not prevent you from adding images, gifs, buttons … Once your typography chosen and set up, you remain free to arrange your mailings according to your objectives.

15 Golden Rules to Master Typography

In the construction of a visual, the text is often inseparable from the image, even if it is present in small quantities.

For reasons of balance, as much as power of the image, you must spend as much time typography these words as crop and other filter effects selected.

That’s why we present you today 15 typography rules to know absolutely.

1. Know the fonts

Each font transmits a particular message. A handwritten typography will not have the same effect as a more massive font, words that seem typed with an old typewriter will leave a different impression than if they appear chalked …

Study the fonts, not just for their appearance, but for what they emit. And remember those that will match the audience and the type of sensation you want to communicate.

2) Limit the number of fonts used

Diversity is a very good thing. But not for the design of a visual. One font for the title, one for the subtitles and a third for the content is the maximum you can afford.

Do not scatter too much: the characters selected must also be associated with each other.

3) Carefully measure the color

Beware of the rainbow effect: too many colors kill the color. Retain the colors that have been selected for the visual and take them back for the texts.

Or incorporate from the outset into the design of your project the hue that will be applied to the lines written always respecting this limit of two to three different values, at most, for a graphic.

4) Align accurately

Knowing how to position a text is also a guide to reading. In our culture, we have learned to read from left to right. Left-aligned text will be much easier to navigate.

Respect the same alignment for all the typography of a document, except to create blocks of text independent of each other.

5) Place the big ones in front, the little ones behind

Regardless of the layout, the eye will first be drawn to larger text parts, or a different color. Play with sizes to capture the attention of readers.

You will have to select the most important word, the one that will be highlighted. It is he who will make you want to read others!

6) Take advantage of empty spaces

The void, on a visual, is not nothingness, it is a framework that highlights what is presented. Let your text breathe, do not stick it to the edges of the image.

Interlinings, white lines, are as important in the composition of the writing part as the content itself.

7) Follow trends (or not)

To find inspiration, it is good to look around and learn from what is happening around you.

For example, you will see many types of fonts or typographic layouts on Type Inspire.

But beware of fads: they can pass very quickly and some “trends of the day” will already be obsolete tomorrow. Smell the air of the time, but do not absolutely try to reproduce it if it does not suit your project.

8) Train yourself

We do not invent a typographer overnight. If you do not know terms like “sans serif”, ligature or drop cap, you will not get very far in this area.

Study the different types of typography, spend a few days learning a mini-glossary and see what is happening again in this area can only be useful.

Whether you want to create typography or use existing ones, by the way.

9) Store your typography according to your projects

Not all companies communicate in the same way or to the same people. A handwritten font may be more suitable for a family audience than for a merchant bank.

You can test several typographies to check the impression they leave but you will save time by reserving the most fantastic to projects that are too.

10) Do not scatter too much

Associating typography is a complicated art. It is not for nothing that you will find on the Internet many lists of typography to associate together, including in the form of a game.

In any case, you will find that the fonts presented always go in pairs. Because beyond that, you will lose in readability and coherence.

Limit the number of typographies on your documents, even if they have multiple pages. Your sobriety will be rewarded!

11) Use numbers in your letters

Typography is not just a font choice. It is also a spacing between the letters, an alignment, a spacing between the lines and even heights of characters.

You do not have to limit yourself to the data that is automatically calculated by your word processing or image software. Check, very carefully, that the numbers chosen are the ones that highlight your words.

And do not forget that white spaces are just as meaningful as written words.

12) Align on the grids

You will compose your texts as images. This implies that your words are precisely aligned with each other, but also with respect to different visual elements, such as illustrations.

Grids will help you check this alignment, so valuable that your entire project is consistent.

13) Take care of the hierarchy

You will direct the eye of those who read your text. And help them with well-differentiated titles or highlighted words.

You will have a number of strengths in your inkwell, from bold character to one that you will increase the size. Also going through the color.

A text is not a flat rectangle without relief. Typography is also about the layout.

14) Respect the rules

The rules are these but also those of grammar, spelling … And those specifically related to the world of typography.

Like not leaving widows and orphans at the end of the sentence, that is, single lines and words at the end of a paragraph. More tips that improve readability, such as linking together a determinant and the word that it characterizes (no “the” alone at the end of the line).

15) Check your spelling

You can choose your typography carefully, compose a dazzling layout … But if your text contains misspellings or grammar, all your work will be irremediably ruined.

Do not just look at the overall effect: reread yourself so that everything is perfect in every detail.

Better yet: get re-read (we are often blind to our own faults, as to our own mistakes).

Prototypo, Create Your Own Bespoke Typography in Just a Few Clicks

Prototypo is an online application that allows everyone to create from two basic models (sans serif + one with) a typography that will be adapted to the final needs in its final context.

We have proposed to Prototypo to present their service on the blog free of charge because we love this concept and we want to highlight young startups in the field of design.

No need for required knowledge or technical skills, just adjust the thirty parameters using sliders. Each setting affects the entire alphabet. In minutes, the user can export a conventional font file and use it in his authoring software, or on the web, just like any other font.

Can You Introduce Yourself?

In the team, we are 2 co-founders: Louis-Rémi Babé, developer, and Yannick Mathey, graphic designer. Before starting the Prototypo adventure, we were both freelancers for clients: web design, interactive design more widely. Three years after the diploma of Yannick (2010) during which a first version was developed, Louis-Rémi sent an email to Yannick to know where the development was. After a few presentations and a beer, they decided to work together, first one night a week and then full time on the project. After a successful crowdfunding campaign on Kickstarter (June 2014) the team decides to get involved on Prototypo sustainably.

Can You Introduce Us to Your Product?

Prototypo is an online application that allows everyone to create their own custom font. About thirty sliders allow you to modify the shapes and proportions of each letter, and these changes affect the entire alphabet. From two basic templates (a sans-serif and a Garalde) one can create a large number of variants of very different forms. Once the user is satisfied with the result, he just has to download the font and use it like any other typography.

How Did You Get the Idea?

Yannick studied graphic design at the Decorative Arts of Strasbourg (HEAR). Like any graphic designer he uses everyday fonts and like any graphic designer he has already tried to draw his own typo. Unfortunately, it is a discipline that requires not only great mastery of the tools and history of the typo, but also many hours of work: drawing a full font takes several weeks to several months for a typo professional .

It was from the frustration of not being able to draw his own typos for his graphic projects that Yannick decided to work during his DNSEP on a tool that would save time in this practice: an alphabet is a system, and as every system has recurring rules; we can then “code” and automate the rules. After a year, a first version developed under Processing was born. (Prototypo Alpha)

What Is the Strong Point of Your Solution?

Prototypo allows in a few minutes and very intuitive way to create a typographic prototype. Its simplicity of use makes it possible to quickly lay the bases of a design and then to come to retouch it in a traditional software to correct the details. We then gain considerable time on repetitive tasks that are often devoid of creative meaning. In a context of call for tenders, creation of logos or simply of a pure creation, Prototypo can be very useful to make profitable the time of the graphic designers which can be very expensive …

What Are the Next Features of the Product?

We currently offer 2 basic templates within the application. The next step is to add more, in different styles, to increase the possibilities.

As the application is on the web, we also want to add options to visualize changes in real time on an existing website: we can draw his typo taking into account its end use, within a web model; eventually, we would like to integrate the same principle into the applications used by all graphic designers: Illustrator, Photoshop, etc.

Finally, we will also create tools to allow more sophisticated users to create parametric templates themselves so that they can redistribute them, a bit like WordPress themes on ThemeForrest.

Zoom on the Operation of Prototypo

A demo is present on the site’s homepage, www.prototypo.io:

Once connected to the application, all you have to do is create your first project using the Collection menu in the left sidebar and fill in its name and the basic template you want to use:

Interface to create a new project

The application has 3 different views that can be displayed or hidden with the menu at the top right:

  • a glyph view that allows you to see in detail the changes on the letter,
  • a word view to apprehend the silhouette of the alphabet and understand the relationship between the letters,
  • a paragraph view to visualize the quality of optical gray on texts in small bodies.

3 views are available to suit all scales of a character drawing

All the parameters are present in the sidebar, and divided into 3 categories: functional parameters (heights, etc.), stylistic parameters (letter fat, etc.) and all that concerns the serifs in a 3rd tab.

3 tabs cut the different sliders according to their specificity

Each slider is set to have an optimal amplitude, allowing sometimes to enter a more experimental creation phase; the cursor will then turn red to indicate this phase.

The cursor goes red when entering a phase that may be experimental

Drawing fonts is a matter of rhythm, sometimes breaking a too rigid system. For this, there is an option that allows to individualize letters or groups of letters. It is therefore possible to create larger letters than others or any other specific modification:

Create rhythm in fonts (GIF)

To create an individualization group, simply click on the icon at the bottom right or in the top menu: edit> individualize parameters.

Activate the “individualisation” mode

Then appears a panel to create a group. This directly integrates the letter being modified into the glyph view. After having named this group, we can associate other letters that will have the same specificities as the pre-selected one.

Individualization group creation panel

Once the group is created, the interface is tinged with yellow to signify that we are in the “individualisation” mode:

Interface of the individualization mode

There are two ways to modify these individualized parameters: in px (value in absolute relative to the initial setting) and in% (value relative to the global settings of the alphabet).

To switch from one mode to another, each cursor has an icon that allows this change:

Different states to switch from absolute mode to relative mode

Once all the settings are done, all that remains is to export. Again, there are several types of export:

  • Export to merged OTF exports a ready-to-use font where all the forms that make up the letter have been merged into a single outline.
  • Export to OTF creates a font file where the shapes have not been decomposed. We can then refine the font in a typographic drawing tool such as FontForge (Open-Source)
  • Export to Glyphr Studio opens a new window to the Glyphr website which is an online manual font editing tool.

Difference between a merged export and a non-merged

You have just created your first font, and it would be useful to add variants to it! From what you have just created, it is possible to add a bold, an italic, a condensed version, etc.

To do this, return to the Collection menu and click on the name of the font you have just modified, then click Add a variant.

If you choose a predefined name, such as Bold, then the grease will be automatically adapted according to this type of variant.

Project management menu and creation of variants.

Here !

There are two offers to use Prototypo: a free version, limited to 6 parameters, and one from € 15 per month where you can create an unlimited number of fonts. (think about the annual offer, 2 months are offered!)

The next development to come within the application:

  • A new font, an elzevir.
  • Ability to synchronize a website and see the police evolve in real time.
  • Tools to manually modify the font, directly in the application, keeping the automatic behaviors then.
  • Automatic spacing (interlacing) and kerning (pair approach) options.

All About the Meaning of a Typography

To know the meaning of a typography, one must first look at its connotation.

It is considered that a simple writing can evoke a completely different meaning according to the way it is presented. The connotation appeals to cultural references, an emotion, a common history. For example, it is easy to bring an Asian connotation to a typography by drawing both sharp and curved lines. In the same way, one can feel the east by observing Arabic calligraphy.

Without knowing it, you have already had to look for typography by connotation on sites like Google Fonts, Font Squirrel or Dafont, by typing: handwritten font or vintage writing.

But then how to create this character and this connotation for a typography? We will see some methods to decipher the meaning.

Shapes Induce the Universe

When we observe a font with curves, round shapes, not very linear and whose thickness varies, we can qualify the plant font. Indeed, these forms represent the nature and its imperfection, the leaves, the rivers …

Any geometrical shape with square corners will not enter the universe of this font.

Rounded and simple shapes (Sans serif font) can also appeal to the youthful universe of childhood.

The Inclination of Text or Characters

Italic font

An easy to interpret meaning is italic.

When the characters are tilted to the right, they express an acceleration. This universe is used in marketing in sectors such as sports or cars for example.

Conversely, the letters inclined to the left indicate a slowdown.

Diagonal Typography

If you tilt your text diagonally, the brain will follow two paths and analyze two meanings:

  • A rising text symbolizes the effort, the progress, the path towards.
  • A descending text will rather be interpreted as a “danger” or a warning. For example a “confidential” or “do not reproduce” watermark will be more percussive written diagonally downward.

Vertical Texts

The verticality of a text symbolizes energy.

However, it is not self-supporting and must be put close to a visual to be understood. For example a mark called “Alto” will express all the verticality of its name associated with a balloon or a mountain peak.

Interleaving, These spaces that speak volumes

Playing on the interlace is to add or reduce the spaces between each character of a word. This method is used instead on titles or hooks. Indeed, in the case of a paragraph font, it might interfere with the readability of the text.

  • The spacing reinforces the elegance of the font for a precious effect, a luxury brand.
  • Reduced spaces form a more original and modern font.

Grasse or Light, What does it mean?

Here the name of the fat of your font already gives you an idea of ​​its connotation.

Indeed, Bold, Black, Semi-bold are used to add weight, illustrate rich content. While fine, light or even ultra-light fonts bring lightness to your text.

We can also use it to embody the quantity:

  • Fat = a lot of volume, a consequent reduction.
  • Light = rarity, the exception.

Alignment of Paragraphs

Three alignments of your texts will have three different meanings:

  • Centered, your paragraph will have an official meaning, for an announcement, an invitation.
  • In flag aligned on the left, your text will have a natural, vegetal form, which will serve ideally a testimony, a form of authenticity.
  • The justified text will give an indication of rigor, uniformity for a solemn text or press.

Lowercase or Capital: What character is expressed?

Last element of interpretation of a typography, capital letters:

  • A text in capital will give an organized impression, of linearity.
  • The lowercase script comes from scribes and calligraphy. It therefore marks the handwriting and gives a sense of closeness, less official.

Creating a font is an exercise that goes far beyond the typographic method. Its shape will have a strong meaning if it is thought in adequacy with the company, the brand or the concept that it represents.

The attention you pay to its meaning will strengthen its impact on its readers.

The Major Types of Typography (Font) and Their Uses

Typography, its ruthless world … Difficult indeed to navigate between the different existing families. Each one has special characters and the police do nothing to help you make your choice.

We will try to draw a robot portrait of the main types of typography, which will help you to take the drama en route …

Serif Fonts

Serif fonts are so called because of the small tabs on which their characters are based, both up and down. Look carefully at the small features that stick out on the side … That’s it!

This family is the oldest of the typography and these legs are not intended to serve as crutches, but are simply the heirs of pen lines calligraphed at the time of writing by hand.

These fonts are not content with being the doyens of typography: they reassure the eyes of readers, who are used to seeing and reading them. Especially for printed documents.

To Remember

We continue to find these fonts in the press, novels, etc.

It is also possible to push the wheelbase to the extreme, so far it goes down to the south. We are talking about Egyptian fonts. These are not hieroglyphs, even if they give a vintage look to the text they present.

Sans Serif Fonts

If you understand what the wheelbase is, you’ll quickly assume that a sans serif font does not contain extra small bars. And you will be right!

More modern than their predecessors, these characters are purified, faster to read. They understood that the time was for the economy of means and that it was necessary to look towards the future.

To Remember

In a fairly coherent way, these fonts are today mainly used for screen reading, or for titles.

Script (or cursive) Fonts

If I tell you that these fonts imitate cursive writing, you will start asking lots of questions. But if I say that this writing was very popular in the 17th and 18th centuries, that it included loops and frills, you should visualize a little better what it is.

We are in handwriting, but classy, ​​not to say classical. It’s very pretty to see, full of elegance … but rather illegible on a long text.

This is also why the scripts have been a little lightened. Many of them have got rid of a lot of their petticoats and ruffles and, while having a nice old-fashioned appearance, mingle a bit more with our modern world.

Today we come to handwriting that tries to reproduce the form of letters such as your 5-year-old niece can produce. Or your uncle. Or your history teacher. In short, the variety is so wide that it is impossible to detail them precisely.

Warning

Some are difficult to decipher: it will be necessary to be wary of an excessive use of these.

To Remember

These fonts will be mainly used for logos, titles, documents that seek a small taste of timeless and handmade.

Fantasy type fonts can be considered as crosses between all these genres. After all, there is no family left of pure blood, including typography.

At your level, the most important thing is to choose the one that best suits your expectations, and the image you want to give. Uniting your logo with a serif font will not have the same impact as a handwritten font.

Be consistent with yourself and your marriage will last a long time!

5 Tips for Using a Handwritten Typography

Handwritten typography is probably one of the most difficult to use.

Because they present as many different characteristics as the writing of “doctor” to that of a teenager who puts hearts on his “i”.

To find the font you need for your project, follow our tips below.

Emphasize Readability

The most important point for a typography, the one you can not emphasize enough, is its readability. As nice as it is, if your text is not readable, you will have lost your time.

Warning

This challenge is even more difficult with fancy fonts or handwritten.

The longer the sentence or the less used word, the more your letters should look like those of the print. Otherwise, the reading will look too much like a deciphering exercise and few people have the patience of Jean-François Champollion.

Do not look for originality at all costs.

Pay Attention to the Hidden Message

Higher up, we were talking about teenagers putting stars or hearts on their “i’s”.

This type of decoration will be less expected from a business lawyer. The same judgment style will apply to the handwritten font you select. She will be judged more or less dynamic, assertive, childish …

The curves of the letters, their inclinations, their forms have a meaning … And you must take into account in the message that you want to pass. You can not choose the same typography in all circumstances, and this is even more true for manuscripts.

Rely on your first impressions regarding the scriptures you remember: your customers will probably have the same.

Check Your Agreements

It is quite rare that a handwritten font is the only one presented on a document. In most cases, you will include other textual elements (informative or otherwise).

However, as in all cases where you will use several types, you will have to check that they agree well with each other.

Warning

You will have to face an additional difficulty here: it is possible that a font too square, too rigid, counterbalances too firmly the warm and relaxed aspect of a handwriting.

But fortunately there are enough typographies, serif or sans serif, to find the perfect match.

Look for Complete Fonts

If you choose to buy an existing typography, check that it contains all the elements you need … or that you might need some day.

As for example:

  • numbers
  • accented letters
  • punctuation marks …

All these elements will be useful: an energetic word followed by an exclamation point which does not resemble him loses singularly his striking power. So check this detail before you start using a font on all your communication media!

Make It Iconic

There are ready-made typographies that can be bought on the internet. And the ones you create just for your brand. These can mark history. This will be even more the case for a logo, an emblem, a short space where you can truly express your personality.

Good to Know

Just make sure that the hand-created emblem does not get pixilated when reproduced in large format. That it is readable becomes less important in the case of a brand signature, even if it must remain identifiable.

If it looks too much like a scribble, it can be stylized while maintaining its manuscript character. This will also develop it to integrate it into your next visuals.

Typography: 12 Deluxe Fonts to Download for Free

In the ocean of visual creation, typography is the key that will allow you to stand out, to be the most original!

The shape should serve the background and that’s why you will need a modern font that will showcase your creation.

Here is a selection of free typography that will be very useful in the development of posters, charters, flyers in the luxury sector or fashion.

COCO

Coco, invented by Hendrick Rolandez, is inspired by the iconic Coco Chanel and the world of fashion in general.

It immediately catches the eye and will suit for titles or magazine covers.

Kate

Kate is a sophisticated and elegant font, proposed by Jérémie Gauthier, which will be perfect for your posters, logos, or luxurious packaging.

Break

This modern typography is a creation of Rajesh Rajput.

She has broken lines that give her a lot of character. You can use it for posters or flyers in fashion and trends.

Morganite

Morganite is a modern writing font perfectly suited for large titles and large.

Composed of several variations, it will give your image an elegant look with its thin characters, or add depth with its thicker character style.

Cannes

Cannes is elegantly inspired by the art deco style. Combining uppercase and lowercase letters, it allows you to create a unique style.

This typography is intended for fashion posters, invitations cards, luxury magazines …

Morena

Morena is a free typography mixing originality and subtlety.

With its graceful lines and curves, it is perfect for modern titles as well as advertising posters on the theme of luxury or fashion.

Audrey

This refined typography created by Cristina Pi is elegant and feminine.

It will fit perfectly in luxury magazines, in the heart of paragraphs, titles or inside typographic compositions.

Vanity

We continue with a second very chic font by Hendrick Rolandez. Its shapes and curves will undoubtedly remind you, the magazine “Vanity Fair”.

The highlight of this font is its very original wheelbase-shaped dot! It will remain legible on all of your communication media.

Glamor

Do you want your message to have an impact on a fashion magazine?

The free typography Glamor will perfectly fulfill this function with its chic and elegant style.

Athena

Athena is a modern writing font, with a classic style.

Readable and elegant, it is particularly suitable for magazine covers and blogs dedicated to fashion.

Valkyrie

Valkyrie is THE iconic typography of designer Hendrick Rolandez.

Made from graphic elements in a very modern style, it has 186 glyphs per font and will be useful for your compositions intended for fashion or the world of luxury

Saonara

Saonara is a serif font, also very inspired by the world of fashion.

It will be suitable for many projects: fashion, magazines, logos, brands, photographs, wedding invitations, quotes, blog headers, posters, advertisements.

Webfont: When Creativity Allows for More Beautiful Websites

A few years ago, sites with beautiful typography were extremely rare. Today, it has never been easier for web interface designers (or webdesigner) to find a font that matches their imagination. Web font libraries are filling up and there are fewer and fewer limits to creativity. and you spend more and more time finding the perfect font. It is indeed important not to underestimate their importance because they are often the ones who give the first impression of the visitors on your site. An adequate and original combination of web fonts is often the best way to reflect the personality of your website.

Typography of the Web: From the Writing of Navigators to Modern Fonts

The role of web typography has evolved in recent years thanks to technical advances in computer science. For example, the HTML font was previously defined by the browser used. It’s only since the introduction of the tag (now obsolete) that developers have been able to embed their own typography on their website. Users could load these fonts only if they were installed on their computers. Otherwise, a “fallback font” was then proposed, a standard web font.

The separation of content (HTML) achieved by cascading style sheets (CSS) and the implementation of font downloads in the browser have enabled web designers to use Web fonts (or webfonts). These are Web fonts. The browser of the user receives when loading a page an indication on the used font and loads it immediately. Thus, users of the website have before them the selected font, even if it is not installed on their computer.

Since the development of the Web Open Font Format (WOFF), a compressed font format for use on websites, webfont licenses are being sold by a growing number of vendors under different conditions. This resulted in a variation in prices, payment methods, and hosting (on a dedicated server or vendor-owned server). Given the competition that is most important for mobile, website designers have a wide choice of modern and creative fonts.

Font Categories and Fields of Application

A font contains all types of typography that have the same design. Several variants of fonts exist and have particularities in terms of width or spacing. That’s why we’re talking about font family. This is how the Segoe UI, Segoe Light and Segoe Semibold fonts belong to the same family.

These various fonts have different fields of application. When you make your choice, you will have to take two things into consideration: readability and emotion transmitted by the police. The screen used also plays a role. Serif fonts are serif fonts, that is, the letters have small extensions placed perpendicular to the main line of the character. For on-screen playback, this font is not always ideal.

The function and position of the text influence the choice of the font. Fonts that are relatively flashy are more suited to titles than body text. This is why webdesigners use several fonts or interfaces in the same text. However, you should not overdo it, otherwise the site may have trouble loading.

The effects caused by these Web fonts vary depending on the context. The following table illustrates the peculiarities that these different fonts present.

Font Specificity - Webfont When Creativity Allows for More Beautiful Websites - vanniedosa
Font Specificity – Webfont When Creativity Allows for More Beautiful Websites – vanniedosa

These characteristics represent the general impressions of the fonts. In practice, the use of a font is an effective way to stand out from the competition. In order to find the typography that suits you, we advise you to follow the following tips:

  • Consider the theme as well as your target group. A convincing combination is of no interest if it is not adapted to the subject you are dealing with. The best is probably to mix serif and sans serif fonts. Manual writing fonts are brighter and create a living effect. They give a personal touch to your site but they must be used sparingly. Calligraphic fonts are often used for special occasions such as weddings and even birthday cards.
  • The longer a page contains text, the better it is to highlight the functionality of the font. Beyond good readability, it should be noted that mobile users use the mobile network to load an Internet page and can not afford to load a typography too complex.
  • Limit the number of fonts used. Two fonts can be enough. One for the body of the text and the other for the titles as well as the specific typographic characters.
  • Look for distinctive Web fonts that create contrast. The interaction between the serif and sans serif types is a good example. Make sure not to overdo it. The fonts should not be too far aesthetically speaking to avoid disturbing the visitors. On the other hand, if the two fonts are similar, it can also have a negative effect because the site will not stand out.

Where to Find Your Fonts for the Web?

Modern font providers sell licenses. These last work either for a fixed duration or grant complete properties. In the first case, you receive a link to the provider’s server on which the Web font is located. In the latter case, you host the font yourself. There are of course lots of open source typography. These are very often used by web designers.

Do you want to optimize your website by using a modern font that stands out? Compare the offers of the following webfonts suppliers:

  • Font Squirrel: List of hundreds of free fonts.
  • MyFonts: various policies acquired largely thanks to a one-off payment and tested for 30 days. The WhatTheFont service makes it possible to identify, free of charge and in an automated way, which font it is.
  • Adobe Edge Webfonts: You can find more than 500 free and modern Web fonts in this list provided by Adobe.
  • Policedecriture: Over 13,000 free fonts available for download. 13,000 free fonts by category.
  • Dafont: this platform presents fonts that belong to their authors. The advantage is that they are unique and will make you stand out.
  • FFonts: free and paid fonts. A premium subscription is possible.
  • Google Fonts: Free Google Fonts. More than 100 different font families and various preview functions.

The 7 Typographic Trends of 2019

Take a nice notebook, go for writing lines. Not the ones you did at school when you were learning to draw the letters … though! Each year, some fonts are needed a little more than others, some trends are at the top of the bill.

Now that 2019 is already well underway, it is high time to take stock of this year’s events.

Editable Fonts at Will

Before, fonts were frozen, as designed by their creators. But this time is over, it was so 2018.

Today, characters can stretch horizontally and vertically, depending on your desires. This allows you to go far beyond bold and italic.

Now you can use them to create variety while staying in the same register.

In Transparency … or Not

Characters cut with patterns that replace the white letters, words that just let their contours appear so as not to hide too much the visual behind them … Here are two different ways to change the look that is focused on a text, to integrate it in the image, or even transform it into it.

The idea is to completely change the relationship to words, either by making them almost disappear, or on the contrary by putting them in relief.

Highlight What Matters

I did not speak for anything of school notebooks at the beginning of this article. Because good recipes, including academic ones, are always so effective, the underline allows you to draw a line under the most important words of your texts.

Do you want them to be selected, put forward, noticed? Underline them. In one stroke, two, or with a highlighter. The game is simply to bring them out, and other than by putting them in bold.

By Hand, and Old Fashioned

Many people complain that our society is dehumanizing. In this context, the handwritten fonts awaken a feeling of attachment rather welcome for you. You can also look to vintage typography.

Both have the same effect: to create a bond, to recall a common past, far from the coldness of machines, with a little sweetness even.

Come on, let’s say it: these typographies are the candies of the year 2019!

See All in Big

Maximalism is also needed for texts.

No, you’re not going to settle for a word discreetly slipped into a corner. You are going to put it in big, in very large, you will fill all the poster with him. Or write longer texts. It’s over to limit, the typography is no longer hidden, it shows!

In 2019, the text is no longer afraid to say that it deserves to occupy the first place. And na!

With Color

Do you remember the color effects that were fashionable last year for visuals? Well, now they have invested typography. Make room for words with color gradients, with titles filled with watercolor …

All on a solid background, most of the time, showing that it is the words that take precedence over the image. At least for a few more months!

In Every Way

How many times have you been told that you have to respect a reading grid, order your compositions, let them breathe? No, do not count, we repeat it very regularly. You will discover that in 2019, typography is a rebellious teenager who decided to break the rules.

Now, the texts are superimposed, chaos predominates and you have to scan a poster or a web page in every direction to find out in which direction to read them.

If the result pulses like music too young for you, you are on the right track (especially if your target is too young for you).

How to Choose Fonts for Your e-Commerce Site

Tips for Better Online Marketing: Choosing the Font and Its Impact on Visual Communication for Your e-Commerce Site

You may be wondering what type of fonts you should remember for your e-commerce site. Here is an opportunity to review the main criteria to be considered in making this selection. and an overview of the most common errors in their use.

You now know the issues related to the choice of fonts on your site, and their impact on your commercial messages. So let’s get right to the point of determining how to choose your fonts.

Clarity and readability, two criteria not to be confused. Although these two concepts may seem very similar, these are perfectly distinct criteria. Besides, only an intelligent combination of these qualities will communicate your arguments effectively.

Clarity

Each letter has a specific form and structure that is conditioned by the font with which you decided to dress it. This influences in particular its thickness, the spacing between the letters as well as small details such as serifs. A font with good clarity is characterized by the reader’s ability to distinguish letters from each other. Take for example the Veteran Typewriter or Vector Black font to illustrate this problem. When used in the header or in a banner we clearly distinguish all the small details of each letter.

Veteran Typewriter - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Veteran Typewriter – How to Choose Fonts for Your e-Commerce Site – vanniedosa
Vector Black - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Vector Black – How to Choose Fonts for Your e-Commerce Site – vanniedosa

So here is a font rather nice and clearly visible title. However, if it is used in blocks of text note how the outlines of each letter become blurred and especially how difficult it becomes to distinguish the features and points of each character. In other words, when the Veteran Typewriter or Vector Black font is used for texts displayed in small texts, it becomes unclear.

In comparison with hooks in banners, product descriptions are usually written using smaller font sizes. Better to opt for a clearer typo like the Arial with more refined forms and clean features.

Arial - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Arial – How to Choose Fonts for Your e-Commerce Site – vanniedosa
Arial Light - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Arial Light – How to Choose Fonts for Your e-Commerce Site – vanniedosa

By opting for a less sophisticated and sans serif font the text unquestionably gains clarity in the blocks. For maximum clarity in your online store, better stick to one of the following fonts for your text blocks:

  • Times New Roman
  • Verdana
  • Crimson Text
  • Arial
  • Podkova

Readability

Readability is the notion that defines how texts are arranged to facilitate their reading by the eye of people. There are a number of factors that can affect this readability such as:

  • Interlining: This is the space between the lines in a block of text. In the absence of sufficient space, the block of text loses its aesthetic but even more serious it hampers the thread of the reading.
  • Kerning or Spelling: This is the space between drawings of two consecutive characters in a word or phrase. Insufficient or excess space is likely to seriously affect the readability of a text.
  • The size of the characters: Written in very small the contents becomes difficult to read. Remember the white pages directory. The size of the texts obviously depends on the visual context and the graphic charter of your site. Nevertheless the rule is that it is wise never to go below 12 (pixels).
  • Color: The contrast of colors also plays an important role in readability. Here are some examples :

A red-blooded text can annoy the readers’ brain and lead to a faster feeling of fatigue. A low contrast will complicate the decryption of words.

Letter Color and Background - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Letter Color and Background – How to Choose Fonts for Your e-Commerce Site – vanniedosa

Contrast that is too high will cause color vibration, while good contrast allows the reader to access content more easily.

Coherence

Imagine that you received the legion of honor from the hands of the President of the Republic at the Elysee Palace. Would you dare to come in tracksuits and sneakers? It’s exactly the same for your online business site. Your fonts must be in line with the tone of your site, your universe and the visual codes specific to your sector of industry. Remember, fonts have a significant impact on the tone and mood of your site. This is why the principle is that it is wiser to choose a font that matches the expectations of your target audience.

Take an example like the site of BBC. You expect to find text written in a font with some seriousness. BBC has judiciously chosen to use Arial for its site

Arial on Article - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Arial on Article – How to Choose Fonts for Your e-Commerce Site – vanniedosa

But look what happens when you change these characters in another font like the Baroque Script.

Baroque Script - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Baroque Script – How to Choose Fonts for Your e-Commerce Site – vanniedosa

No folichon is not? The Baroque Script corresponds to a more fun site, but it does not correspond to the codes that are expected from a site like the BBC.

Combine the Fonts

The combination of fonts is far from an exact science, but there are still a number of fundamental principles that can help you heal the look of your site and gain professionalism. As with color selection, the rule is that opposites attract and that they can be more easily combined. On the other hand, two similar fonts will compete and eventually annoy the reader’s brain.

Here is an application of this principle:

Combine Font - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Combine Font – How to Choose Fonts for Your e-Commerce Site – vanniedosa

On the left we have two fonts with serifs. While they are technically different, their similarity leads to a form of visual tension not very pleasant to see. On the right, we have a mechanic font and serif, record, what a difference. The voltage disappears instantly. Indeed, the combination of more contrasting fonts allows each character to express themselves while calming the game.

Here are other examples of opposing fonts that complement each other naturally.

Combine Font Script - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Combine Font Script – How to Choose Fonts for Your e-Commerce Site – vanniedosa

Frequent errors about typos:

The dumplings made in the use of typos on the sites are so frequent that they could be the subject of a book. But here are the main faults that you should ABSOLUTELY avoid.

Do not touch the proportions: You should always use a font as it is. We can of course increase or decrease the size of letters but they should in no case be compressed, stretched or manipulated and lose their original proportions.

Proportions - How to Choose Fonts for Your e-Commerce Site - vanniedosa
Proportions – How to Choose Fonts for Your e-Commerce Site – vanniedosa

Flee these typos on your site: Let’s say it all the way there are unfortunately typos that have been abused, overexploited and have become absolute symbols of cheesiness. They are rotten to the point of triggering visceral reactions with professional graphic designers – up to infarction. For your safety and that of your loved ones – keep a safe distance from the following typos:

Comic Sans: Comic Sans is a cartoon style typo that was created for informal use. Widely abused Comic Sans now instantly gives an amateurish image to everything he touches.

If you are looking for a fun, playful or childlike typo try the following fonts instead:

  • Autour One
  • Ribeye Marrow
  • Flamenco
  • Unkempt

Papyrus: Papyrus was created to resemble handwriting on papyrus as in ancient Egypt. Like Comic Sans, she was the victim of over-exploitation and abuse. The use of this font on a site now returns an ultra-kitsch image that no other company worthy of the name would want to be associated with.

If you are considering using Papyrus, here are some alternatives that should make you happy.

  • Quintessential
  • Fondamento
  • Crimson Text

In summary

Do not be intimidated by this new step of choosing your typos for your e-Commerce site. Just follow these little principles and remember to trust your instincts. If you were looking for typos, or if you are preparing a redesign of your graphic design, maybe spend a few minutes searching for typos on the net.

Here is a fantastic resource for downloading fonts: Google Fonts. Google Fonts is the ultimate platform for finding and using royalty-free and web-ready typos. You can download and use for free any fonts you find there.