La macrotypographie de la page Web – Anne-Sophie Fradier @mitternacht
What is macrotypography anyway? Is there a microtypography?
The difference between microtypography and macrotypography is that the former deals primarly with the individual fonts or even characters, while the latter is focused on the broader page layout.
While it may not seems so to us intuitively, the layout of the pages has changed surprisingly little since the time of manuscripts written on skins of dead animals. The macro elements of columns, initials, titles and such are still there.
The invention of the printing press changed the form and technique but elements stayed the same in many ways.
After the first World War macrotypographic styles changed, we went from a more traditional, centered, symmetrical, calm, “bourgeouise” style to a much more dynamic style with different alignments, positioning of the text, use of less traditional, new types of fonts. In your mind just imagine the difference between a traditional 19th century Victor Hugo novel and a multi-column dynamic layout with sans-serif titles etc.
With the web, what changes most is the surface since we are not limited to pages anymore and we have a virtually limitless surface to work on. Scrolling replaced page turning.
It’s important to create grids for the placement of elements on a web page and stick to them (except when not). Grids, margins, gutters, baselines should all be in your daily vocabulary in this line of work. Grids come in many forms though and naturally depend on the type of the content on your site.
These conventions give the feeling of order and comfort on the site, most of all they make it easier for users to read and navigate the content on your site.
The text has to be able to “breathe” and we can achieve that with the proper use of margins, breaks, and – while she did not use the exact term – white space.
It’s important to give time for “pause” and logical separation of thoughts in the text, that is why paragraphs were created. On the web it’s more appropriate to leave blank lines between paragraphs. One has to be careful not to overemphasize the pauses and make them into breaks. :)
Some good web layout and typography examples: Second & Park, Jon Tan, BoingBoing features (each one has its own design & layout).
For the end: “Don’t forget: It’s good to understand the rules and even better to break them.” and because it simply sounds sooo much better in French “Et n’oubliez pas: comprendre le règles, c’est bien ; les enfreindre, c’est mieux.”
Anne-Sophie also mentioned a type-related website in the pipeline Typographisme.fr. It’s not ready yet, but follow them at @typographisme to know when it will be.
I found the lecture wonderfully informative and enjoyable. Thanks to the many enlightening debates with designers at 3fs much about grids and such was already very familiar to me, but more than welcome in the lecture nonetheless. I also loved Anne’s on stage attitude and a healthy dose of humor in the lecture. Sadly I didn’t get all of it, the jokes were good I’m sure, but my knowledge of French sometimes doesn’t yet suffice for such advanced functions as humor. :)
I also started blushing when thinking about this very blog. While the theme I, with much care and thought, clicked “Apply” on has served me fine I would like to design something custom and much nicer typography and layout wise. Perhaps this lecture will give me the impetus to persevere and desgin & CSS-away.
