Fonts – Responsive Web Design Fundamentals

Let’s try a little experiment. I want you to read the first
paragraph of Alice’s Adventure in Wonderland out loud. It’s a little weird right? With only a few words per line,
it’s kind of awkward to read. Words or
phrases that might be read as groups, end up getting broken
across multiple lines. Making it hard to parse the sentences. Why don’t you try this one instead. It’s got a few more words per line, so
maybe we won’t have the same problem. It’s the same content but with more
words and it still doesn’t work. If a line of text is too long,
readers get lost when trying to find the next line and end up reading
the same thing over and over again. Or they get lazy and might read the first part of each line,
but by the end, they’re skimming. Over the last century, there’s been lots of research done
to determine the ideal measure. That’s the technical term for
the length of a line. I’ve seen research ranging from
45 characters per line to as many as 90 characters per line,
depending on the font used, if it’s in print, if it’s projected,
or on a computer screen. But, there seems to be a pretty solid
consensus around 65 characters per line for the web. It’s not a hard and fast rule,
but it’s a good place to start. We need to consider the way people
read as we create our designs, since it can affect our layout. That’s why line length is
an important factor to consider as you’re building sites, and
something I always take into consideration as I
choose my breakpoints. It’s also important to make sure
that fonts are big enough to read across any device. I always set my base font
to at least 16 pixels, and at least a 1.2em line height. Depending on the situation, I may even
increase it for text heavy sites. 14 pixels is just too small. That may sound big, but makes for
a much better reading experience. Even on a desktop, it works quite well.

Be the first to comment

Leave a Reply

Your email address will not be published.