Most of content on the web are full of typography mistakes—and I will not talk about grammar, that’s another story. Content of your website is like your code, if it’s not well indented, if you don’t put a carriage return in the right place, if you don’t respect code standard and are not rigorous, your code will not be easy to read. That is the same thing for your contents, if you want people to keep reading your blog, stay in your website, you should respect typography rules. I will present you the most important rules I think you should apply in your texts.
Section intitulée rules-to-applyRules to apply
Each language has its own typography rules, it may even have more than one, depending on the country. Here I will mainly speak about American English rules, but also about France french.
Section intitulée spacesSpaces
Section intitulée al-ways-put-ex-actly-one-space-be-tween-sentencesAlways put exactly ONE space between sentences.
Many people have the habit of putting two spaces between sentences, but guess what? They are wrong.
This behaviour can be explained by the “typewriter era”. Typewriters used a wider space (two spaces actually) between sentences than between words as mandated by the styleguide of the era. But nowadays with computers, rules have changed and using two spaces is not necessary. All professional typeset use only one space.
Section intitulée white-space-charactersWhite-space characters
Multiple types of white-space exist, here are the most important used in the web:
Word space: (space bar) put it between each word, is the usual purpose.
Non-breaking thin space: (
) represents half size of a word space, commonly used in French typo before some punctuations.
Non-breaking space: (
) use it to prevent awkward breaks between two elements; like between a numeric and its unit or reference.
Hard line break: (
<br />) put it when you want to move next word in a new line. It is useful when you want to stay in the same paragraph like an address.
32 Gates Ave
Brooklyn, NY 11238
Carriage return: (
<p></p>) use it to delimitate paragraphs.
Section intitulée punctuationsPunctuations
In French, we add a
non-breaking thin space before
;. And a
non-breaking space before
:. Whereas in English, we don’t add any space before these symbols.
Section intitulée always-use-curly-quote-for-apostropheAlways use curly quote for apostrophe
' is the symbol everyone use by mistake in contractions or to indicate possession. But the right character is the curly one
’; which look much better no? The problem is that we don’t have this symbol on our keyboard.
Section intitulée smart-quotesSmart quotes
Smart quotes have an opening double quote and a closing double quote, not just straight double quotes
Their representation differs depending on the country. In France, we use guillemets
« … », in Germany, we use
„…“, and in England, it’s
“…” for example.
Section intitulée hyphenHyphen
We use hyphen
- to break word in justified texts at the end of a line. Algorithms exist to split a word in good way, in order to not split it in center of a syllable.
Section intitulée ellipsisEllipsis
The ellipsis is often wrongly represented by typing three successive dots, but space between them is either too small or too big. The right way to symbolize the ellipsis is to use the ellipsis character
Section intitulée trademarkTrademark
In some word processing software, when you type
(tm), they are replaced automatically by the copyright
©, the registered trademark
® and trademark
™ symbols. However, some people continue to use this parenthesis syntax even when they are not replaced. You can directly type these symbols with keyboard shortcuts:
|©||Alt + C||AltGr + Shift + C||Ctrl + Alt + C|
|®||Alt + R||AltGr + Shift + R||Ctrl + Alt + R|
|™||Ctrl + Alt + T||Compose Key + T + M||Ctrl + Alt + T|
An editor / blogger / client don’t necessarily know these rules, they are different depending on the country and the language that make it more difficult if your site is multilanguages. That’s where JoliTypo comes in.
Section intitulée jolitypoJoliTypo
JoliTypo is a library created by Damien ALEXANDRE in order to correct typing errors, as we seen previously, depending on the locale. The library is written in PHP and very easy to install. We use it in production for several of our PHP projects. I suggest you to look at the documentation which is complete with all available fixers.
Take this paragraph:
"We're going to do this as scientists , and we'll save some elephants in the meantime." You know? Currently , drone operators must watch live video feed to detect intruders ,and it is all too easy to miss the poachers. We were told to go find people in this vast area based on no intelligence -- it was an absolute waste of time... JoliCode (c)
Let see how to fix this text:
use JoliTypo\Fixer; $fixer = new Fixer(array('Ellipsis', 'Dash', 'SmartQuotes', 'NoSpaceBeforeComma', 'CurlyQuote', 'Trademark')); $fixer->setLocale('en_GB'); $fixed_content = $fixer->fixString($content);
Here, we specify fixers we want to apply, set the locale and we call the fixString function to correct the text. That’s it.
This is the result:
“We’re going to do this as scientists, and we’ll save some elephants in the meantime.” You know? Currently, drone operators must watch live video feed to detect intruders, and it is all too easy to miss the poachers. We were told to go find people in this vast area based on no intelligence—it was an absolute waste of time… JoliCode ©
You can see precisely the diff between both here:
"We're“We’re going to do this as scientists ,scientists, and we'llwe’ll save some elephants in the meantime."meantime.” You know? Currently ,know? Currently, drone operators must watch live video feed to detect intruders ,andintruders, and it is all too easy to miss the poachers. We were told to go find people in this vast area based on no intelligence -- itintelligence—it was an absolute waste of time...time… JoliCode (c)©
As you can see, JoliTypo will improve and standardize the content of your pages. That will make your text more pleasant to read.
You can try it yourself! http://jolitypo-demo.herokuapp.com/
You can also add your custom Fixer and contribute!
Commentaires et discussions
La micro typographie appliquée sur le Web
Depuis Gutenberg et l’invention de l’imprimerie, la typographie a été dotée de nombreux outils améliorant la lisibilité. Le Web, bien que souvent comparé à l’imprimerie, en détruit de nombreuses spécificités, à la fois par ses limitations techniques et par un manque de connaissance…