ATTENTION PLEASE!

Applying fonts is essential for professinal designers during design career, and choosing the right fonts is a very important guarantee for good design.

But do care about the liscenses of commercial fonts, read the liscense specifacation, and contact the copyrighter if special authorization needed.

Why create this

When we talk about fonts and typefaces, people wonder what is the difference. Here’s the easiest explanation from Scott Prather's article - The Importance of Typography:

A font is a grouping of typefaces that have similar characteristics.

A typeface is referring to an individual family member of that font.

While, maybe it's not so important for designers to tell what is a font or what is a typeface, but choosing the right ones for design is really important. You know this most, and you know this means a lot to your desin.

Classic fonts are timeless and they last for centuries for reasons, when you use them, you understand why.

And I hope this site helps you someway when consider choosing classic fonts.

How create this

This is a responsive and mobile first website mainly developed through SVG, CSS3 and javascript. Thanks to SVG thchnic, this site loads less than 200K bytes resources for over 10 screen pages when morden browsers visit the first time.

I have to say, SVG applying is a very popular technical trend in morden web design and development. Because of its sharp vector apperence, you don't have to prepare different large size bitmaps for various high definition devices. What's more, you can create amazing animations to make your apps cool not only with CSS3.

If you're not familliar with SVG yet, I strongly recommond starting from SVG Tutorial by Jakob Jenkov and the very good articles on SaraSoueidan's blog.

SVG with animation and transform brings audience excellent experience. For instructions about transform on SVG, you can find detailed information in the article - Transforms on SVG Elements by Ana Tudor.

Since corss browsers applying transform and animation with CSS3 and SVG combinations are not easy, my personal suggestion is wrapping SVG graphic in html elements, so you can apply CSS3 transform and animation on html elements which has a better cross browser support. This tip will break you out of the hell of various buggy behaviors of rendering SVG.

It's not easy for browers to render large area SVG graphic. Caring about the performance is a must, especially with complex animation or something performance unfridenly, like gradients, shadows... Mobile browsers even crash often if you don't do any technical fix. The second suggestion is remove or hide (display:none setted, but not opacity:0 or visibility:hidden setted, since the after two still need browser rendering) the elements not in view, and dynimac show them when needed. This helps a lot on performance direction since it will stop unnecessary rendering in browsers.

SVG's combination with other web technic help developers a lot when develop modern web apps, but you need know and keep follwing the useful tips about them, find more resources and keep learning.

Good luck!