The word ante
is surrounded by an unstyled sup tag, so default browser styling applies. Notice how the line height is bigger than on the other lines (don't be fooled by its relative unobstrusiveness here; in a nicely formatted page, it will stand out!).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Now the same text, but with a fix: line-height:1px. No more broken line-height!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Too long of a line induces ocular fatigue (this relates to the back-and-forth movement of the eyes; we do not read word per word, but a chunk of words, back and forth). The 66-character line (counting both letters and spaces) is widely regarded as ideal.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Now the same text, but with a fix: max-width:44em (regular width would break in smaller windows). Much less ocular fatigue. The value shall be adjusted for multiple columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
A long list of uppercase letters, typical of abbreviations, could hamper lisibility without some arrangement.
Projects sponsored by UNESCO include literacy, technical, and teacher-training programmes.
Now the same text, but with a fix: letter-spacing:0.1em to reduce the "aggressiveness" of full-caps.
Projects sponsored by UNESCO include literacy, technical, and teacher-training programmes.
This is hard to tell without a true text, so I added some extra CSS. While scrolling the text, notice how the first one seems a bit "compressed" (at paragraph level), compared to the second one. The first one as inter-paragraphe spacing not on par with its line-height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Vivamus in mi elit, at molestie magna. Fusce et massa velit, eu porta libero. Proin nec leo libero, eget varius dolor. Nunc hendrerit ultrices leo quis iaculis. Sed vehicula arcu et nulla pretium eu cursus leo bibendum. In porttitor ipsum quis ante pulvinar mollis. In commodo orci sit amet velit ornare nec fermentum erat pulvinar.
Nulla diam velit, posuere ut imperdiet eget, luctus at ligula. Duis vitae urna felis, sed dignissim metus. Vivamus cursus laoreet tellus, in gravida tellus auctor vitae. Praesent adipiscing ornare tellus vel viverra. Morbi id risus orci, in convallis augue.
Cras malesuada dictum dui, semper eleifend dui volutpat ac. Nunc scelerisque euismod dui, at vehicula elit vehicula eu. Donec dolor magna, rutrum non eleifend id, gravida a enim. Aliquam quis sapien ullamcorper odio sollicitudin ultricies nec pellentesque justo. Praesent a elit sem. Mauris et faucibus eros.
Integer consectetur lacus et augue placerat mollis quis eu est. Curabitur nec purus lectus, non semper turpis. Mauris blandit, eros in varius convallis, elit velit convallis urna, id ultricies arcu velit sit amet neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget nisi vel risus scelerisque scelerisque. Donec aliquam blandit imperdiet. Morbi vulputate rhoncus quam non accumsan. Cras accumsan eros non elit dictum a pharetra lacus feugiat. Aenean at augue nisi, ac cursus velit. Aliquam tellus augue, condimentum ut fringilla non, aliquet in neque. Mauris at nisi dolor, sit amet hendrerit velit.
Now the same text, but with a fix: letter-spacing:0.1em to reduce the "aggressiveness" of full-caps.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Vivamus in mi elit, at molestie magna. Fusce et massa velit, eu porta libero. Proin nec leo libero, eget varius dolor. Nunc hendrerit ultrices leo quis iaculis. Sed vehicula arcu et nulla pretium eu cursus leo bibendum. In porttitor ipsum quis ante pulvinar mollis. In commodo orci sit amet velit ornare nec fermentum erat pulvinar.
Nulla diam velit, posuere ut imperdiet eget, luctus at ligula. Duis vitae urna felis, sed dignissim metus. Vivamus cursus laoreet tellus, in gravida tellus auctor vitae. Praesent adipiscing ornare tellus vel viverra. Morbi id risus orci, in convallis augue.
Cras malesuada dictum dui, semper eleifend dui volutpat ac. Nunc scelerisque euismod dui, at vehicula elit vehicula eu. Donec dolor magna, rutrum non eleifend id, gravida a enim. Aliquam quis sapien ullamcorper odio sollicitudin ultricies nec pellentesque justo. Praesent a elit sem. Mauris et faucibus eros.
Integer consectetur lacus et augue placerat mollis quis eu est. Curabitur nec purus lectus, non semper turpis. Mauris blandit, eros in varius convallis, elit velit convallis urna, id ultricies arcu velit sit amet neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget nisi vel risus scelerisque scelerisque. Donec aliquam blandit imperdiet. Morbi vulputate rhoncus quam non accumsan. Cras accumsan eros non elit dictum a pharetra lacus feugiat. Aenean at augue nisi, ac cursus velit. Aliquam tellus augue, condimentum ut fringilla non, aliquet in neque. Mauris at nisi dolor, sit amet hendrerit velit.
You shuld not see much difference, since browser usually use the same margin back and top. So, I forced an disgraceful value to point you out (for the first text, the top margin is not on par with the bottom one).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Now the same text, but with a fix: margin:1.5em. That way, the margin are the same in all four directions. Notice what matthers is top and down. Right and left are an extra (sometims one we can't afford).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id magna non erat tincidunt pulvinar eu vel augue. Suspendisse sed mauris dolor, eu sagittis nisl. Nullam non neque a justo suscipit iaculis. Curabitur nec cursus nulla. Pellentesque dapibus congue venenatis. Quisque consectetur arcu nec odio cursus feugiat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a lacinia dolor. Pellentesque et nulla ac mauris lacinia vulputate. Nulla pellentesque bibendum mollis. Mauris in ligula eget tellus placerat semper. Cras ornare egestas lobortis. Phasellus venenatis placerat lectus, ut viverra erat vestibulum in. In eu rutrum tellus. Cras consequat luctus vestibulum.
Pair thus definition list. Two classes (layout and separator) for flexibility: if you want another separator, you don't have to change everything. Finally, the separator is language-aware.
- Luke
- A certain point of view?
- Obi-Wan
- Luke, you’re going to find that many of the truths we cling to depend greatly on our own point of view.
- Luke
- Un certain point de vue ?
- Obi-Wan
- Luke, tu découvriras que beaucoup de vérités auxquelles nous tenons ne le sont que d'un certain point de vue.