Improve your Website’s look with Typeplate

        Usability, Web Design
Typeplate logo

Nowadays, the use of CSS frameworks like Bootstrap or Foundation is very common in front end development and it allows developers and designers to build good looking HTML structures pretty quickly. Usually these frameworks only focus on layout and functionality, disregarding basic design principles for typographic patterns.

This is a big problem, because a website is not just layout, navigation, tooltips or buttons, a website is mainly content, and content must look good and easy to read in order to be effective, therefore font sizes, line heights, indentations, hyphenation and other properties related to typography should be balanced and work properly as a whole.

Typeplate is an initiative to solve those problems. Typeplate is not a CSS framework, but a simple collection of styles that focuses on improving the properties of headings, paragraphs, figures (or captions), making your website’s content more pleasant to read.

Typeplate can be used with any CSS framework, it doesn’t really impact the grid system and features that frameworks come with by default, so it’s safe to give it a try and see how it behaves in your website.

However, you might consider to change the default font sizes that Typeplate specifies in its style sheet, because those could be too big for your website. In their site you will find recommendations on how to change those values, they also suggest modularscale.com to chose the new font sizes and keep the right proportions between headings and content.

In the image below, you can see what Typeplate can do, by simply using the css they provide. You can see this demo at: http://typeplate.com/demo.html

Typeplate demo


About Luis Cuellar

Co-founder and Agile Coach, in charge of leading, managing and coaching agile project teams to achieve a high level of performance and quality in delivering projects that provide exceptional business value to government agencies and nonprofit organizations.
This entry was posted in Usability, Web Design and tagged , , . Bookmark the permalink.

Comments are closed.