About this site

This blog is dedicated to new forms of storytelling and our activities @klynt_app.

Find me on

5 simple typographic tips!

image

In most webdocumentaries, you may have noticed the predominant place given to text, which enriches the picture, gives information other elements and populates the numerous spaces dedicated to editorial content. Thus, typographic choices take part in both legibility and aesthetic of the artwork.

Considering the wide range of (nearly) free typography available today, and of HTML5 editing tools like Klynt that allow to use them very easily, typography is still an art that can’t be improvised. Here are some key principles that should allow you, as we hope, to dive in this wonderful universe.

Simonetta italic/regular

image

1. Play it safe

A traditional composition should not have more than three differents fonts. But if you still feel ill-at-ease with the idea of mixing typographies, my first advice would be to keep with the same font but to mix its variations. So the standart method is to put the headline in bold, the underliner in italic and text in regular. Simple… But still efficient!



 Economica bold/Crimson italic

image

2. Contrast is king

« Opposites attract ». This expression is perfectly right regarding typography. If you want to create an efficient and aesthetic pattern, just try to associate a sans-serif font with a serif one. Here, the Economica and the Crimson contrast each other also with the spacing which makes them complementary.



 Stardos bold/Crimson semibold

image

3. Go crazy but don’t forget your pills

You can use a font with a lot of personality such as the Stardos for headtitle. But beware of the « too much » touch! Prefer a readable font for the text, just as a serif, which is far better in order to read long text. Furthermore, do not hesitate to use the picture as a grid to position your text : It will improve the harmony between text and image.



 Lobster/Arvo

image

4. Have fun with composition

Once you’ve mastered all the previous points, do not hesitate to think outside the box in composing picture in an original way. As a result, your interface will be more lively and dynamic. But never forget: There is always a composition grid that linked logically header, underline and text, even with an uncommon presentation.



Quicksand Light Italic/Lato Bold

image

5. Boss level

At this level, typography becomes a game. At last, everything is possible. The only thing that does matter is the harmony between the full and the empty spaces, as it enhance the movement of eyes through the page. Always try to think for the user and ask yourself this two question: Is it legible? Is it visible?



Here is a tutorial to export fonts into Klynt:

http://support.klynt.net/customer/portal/articles/1004975-7-modify-the-player-design-by-adding-fonts-and-changing-css-files

Klynt team can’t wait to see your next projects with –I got no doubt– beautiful typographic associations.

Marion

Appendix

While we were preparing this post on typography, Arte released its first video game Type:Rider. It’s a great and beautiful project which you should definitely take a look at!

All photographs in this post by independent photographer, Roman Osi, based in Paris, France. Member of the cooperative photographic agency Picturetank.com since 2004, his artwork reveals a colorful and invisible world during night time. He works with several french institutions, communication, publishing and international press. He also takes part in photographic workshops with adults and young public. Its exhibitions spreads through the world since 2002: Brazil, Indonesia, Algeria, United Kingdom, France, Germany, Cuba, Argentina, Mexico, Romania…

Glossary:

*Open source typography: Fonts in universal access via free license.

*Sans serif: A font that does not have the small projecting features called “serif” at the end of strokes.

Website with open source fonts:

http://www.google.com/fonts

http://www.fontsquirrel.com/

http://www.behance.net/search?search=free+font

http://fontfabric.com/category/all-fonts/

http://www.dafont.com/fr/

http://fontm.com/

http://www.awwwards.com/100-greatest-free-fonts-collection.html

http://www.awwwards.com/100-greatest-free-fonts-collection-for-2013.html

Good typographic associations in webdocumentary:

Retour à Bagdad

Des mots du jazz

Rapporteur de crise

Tags 5 simple typographic tips