I am trying to style this pen and I can't quite get the right CSS for the text to make it more readable and not looking overcrowded.
Core CSS:
p{
color: #000;
font-size: 16px;
line-height: 1.25em;
padding: 0 0 1em 0;
text-align: justify;
}
I plan to use the improved CSS both for the normal, desktop version and for mobile. Here's a screen of what I think is a great example of readability for mobile.
The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen.
line-height
, font-size
, color
are all good. I usually use color: #333
or color: #777
to create less contrast between a white background and black letters.
You may also want to consider letter-spacing
, which creates a more "airy" sense with more whitespace between text characters:
h1 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 5px;
letter-spacing: .05em
}
p {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
-moz-font-smoothing: antialiased !important;
text-rendering: optimizelegibility !important;
letter-spacing: .03em;
}
DEMO: http://codepen.io/anon/pen/ojaMEy
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With