Reader mode could use some typography love 馃挄
Reader mode is coming along as a great feature, and it has been my main motivation build and run Epiphany from the master
branch lately. That being said, the styling for the reader mode could use some tweaking to improve its looks and make it less tiring to read long pieces. From the top of my head:
- Choosing a type face optimized for screen reading.
- While I personally tend to favour serif typefaces, a good sans-serif would do as well. There is no conclusive research of either serif nor sans-serif being better for readability.
- The font should include real variants of the basic variants (regular, bold, italic, bold-italic).
- The chosen should be bundled, to avoid showing different styling depending on the list of fonts installed in the system.
- As there is no space restrictions, the format (TrueType, OpenType, WOFF) is unimportant.
- Attention must be paid to the license of the font.
- Using a modular scale to derive the sizes from all the elements (headers, block quotes, etc.) from the size of the main text body type face.
- Equally important: deriving the size of blank space elements (line spacing, margins, paddings).
- Using relative measures this ensures that zooming in the reading mode always results in a pleasant design, where proportions are kept.
- A List Apart has a good introductory article
- Don't use
#ffffff
and#000000
(more).
For the sake of trying things out a little bit, I entered the following CSS snippet in the Web inspector while in reader mode (it uses the very nice Merriweather type face, which is distributed under the SIL Open Font License):
* { font-family: 'Merriweather', serif ;
line-height: 165% }
h1, h2, h3, h4, h5, h6 {
font-family: 'Merriweather Sans', sans-serif }
tt, code, pre {
font-family: 'Source Code Pro', monospace }
p { text-align: justify }
blockquote {
border-left: 0.25em solid #efefef;
margin-left: 1rem;
margin-right: 2rem;
font-size: 90%;
font-weight: 300;
text-align: right;
}
blockquote p {
margin: 0;
text-align: justify;
}
hr { border: 1px solid #efefef }
picture img { border-radius: 3px }
The rendering in reader mode with the above CSS rules looks like the following: