Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations. In a fluid layout, browser width and typographic measure are linked: the wider the viewport, the more characters per line. Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a few things that can be done to avoid extra long lines of text in fluid layouts. Robert Bringhurst recommends for us to leave at least two characters behind and take at least three forward.
Since hyphens is an inherited property, it isn’t sufficient to set it for a limited number of elements and assume you’re done. You have to make sure you’ve turned it off for the elements that shouldn’t be hyphenated.
@mixin css-hyphens($val) {
// Accepted values: [ none | manual | auto ]
-webkit-hyphens: $val; // Safari 5.1 thru 6, iOS 4.2 thru 6
-moz-hyphens: $val; // Firefox 16 thru 20
-ms-hyphens: $val; // IE10
-o-hyphens: $val; // PRESTO...haha LOL
hyphens: $val; // W3C standard
}
body {
// Ala Trent Walton
// http://trentwalton.com/2011/09/07/css-hyphenation
@include css-hyphens(auto);
}
abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation
@include css-hyphens(none);
}