Typeplate, and how to improve the presentation of your website

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

Do you need some help?

Let's get started. Tell us a little about yourself and your organization
and we can start a conversation about your needs and our capabilities.

Related Posts