Why Tiny Typo ?

Write on the web can not be done without HTML. It structure the content, i.e. it gives it meaning, to make it understandable by machines which broadcast to get the message to the reader.

In addition to the interaction and layout elements, HTML content includes marking content elements. This is the foundation. While we can make a website without form, with a minimalist layout, we can not - whatever the site - do without titles, paragraphs, links, lists, etc.

Yet this semantic HTML base is not always stylish so as to be perceptible and understandable by humans. The web editors therefore looking for other ways to format… wrongly, because HTML is already rich of potential. But these remain unknown. Often partially used, these semantic tags are more numerous than we think at first.

This is translation of the original french article : Pourquoi Tiny Typo ?. Please help me to improve it by pointing my mistakes !

Do the necessary minimum

So I listed all HTML elements useful for web writing, to bring it together in one page, first to test my integration work : check the graphic rendering of each element and make sure I do not forget anyone. I always start there.

The first thing to do, after the reset, is to define the elements of the web document. Because every page are built with these elementary building blocks. This is the minimum necessary.

Yet none of CSS frameworks that I studied, completely covers this need. They resolve more complex problems, but a bit careless that base. Here it’s the definition of lists that are not stylish, elsewhere the inline quote are like block… which has the which result domageable to making them imperceptible. So I wanted to fill this gap.

Because it is a CSS base, not a complete framework, and because it makes the minimum, which one is mainly typographical, it’s called Tiny Typo.

Improve readability

Essentially typographical, the formatting of these HTML elements, useful for web writing, is what makes the texte intelligible. However many websites be yet difficult to read. I wanted to make the semantic HTML visible. To improve readability.

In this time of diversification of devices, it’s important to go back to basics, to rediscover that we can already much with few. Near HTML. I relied on the recommendations of readability to improve accessibility, without perfectionism nor experimentation, to not complicate it.

Concretely it’s mainly to use a relative unit for size, here 1em, in order to enable the zoom, increase the line spacing, to 1.5, and respect the vertical rhythm. With exaggeration, I could say that this three values are the only one in Tiny Typo.

I sincerely believe that this should suffice to make a site. Everything else is superfluous. Do not they say that Web Design is 95% Typography ? In any case it’s the base. Feel free to add more.

Easy to use

This is not a sealed black box nor a multifunction gas plant, don’t be afraid ! This is a CSS base ready to use, but also customizable and removable, for hacking and DIY.

To facilitate customization, a minimum of fonts and colors are declared. It’s your turn to complete in your own style sheet. The TinyTypo base is light : neither font nor picture nor JavaScript… it consists only of HTML and CSS, nothing more. What is also a way to show the possibilities of HTML by example, without drowning in the reading of specifications.

If the demo is done in HTML5, Tiny Typo works well with earlier versions, XHTML and HTML 4, including the old sites built with <table> !

Finally, I wanted the installation as simple as possible. This base is available as a single file, a simply style sheet. With a documented demo itself in one page. To learn more, see the code : it contains links to explanatory articles.

Advanced uses

Optional but practical, some CSS selectors complementing the native HTML are available for your convenience. To summarize, you have homonyms classes of each HTML element, to apply the same rendering that one, but on a different element.

For you to choose only those you need, Tiny Typo is split into multiple files (as Daisy method). You can easily add it into your usual framework. It’s also configurable with some LESS variables.