Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Sadly, if you don't have much control over the HTML, it's hard to get a solid, consistent presentation out of CSS. This is especially true if you're not able to add special classes/IDs to your elements. And <code>&lt;br/&gt;</code> tags, incosistently used, will wreak havoc with any attempt to standardize the layout. </p> <p>If you're only limited to the HTML you've been provided, you're primary goal should be to make it as readable as possible. Make sure the font size is large enough that people can comfortably read it leaning back in a chair. Or standing over someone's shoulder. It doesn't need to be too big, but if it's text heavy like you claim, traditional 12pt might feel too small for a lot of reading. </p> <p>Which font to use is another consideration. Verdana is wider than Arial, so it takes up more horizontal space, but tends to be easier on the eyes. Others tend to prefer a serifed font like Georgia, which can hold up well at larger sizes. </p> <p>Vertical spacing is important. Make sure to include plenty of visual break-age between areas of the page. You can achieve this with an obvious and consistent subheading style. Also make sure that the <code>line-height</code> between each line is wide enough - people don't like to read 'bricks' of text.</p> <p>And don't forget horizontal space. A general rule of thumb is that a column of text probably shouldn't span more than 60-70 character per line, or it becomes more difficult read.</p> <p>Remember that people are coming to your site for information, and the quicker they can access and get that information the happier they'll be. Visual eye candy is nice, but your first priority should always be make the site as easy to use and legible as possible.</p> <p>As for inspiration, I'm a pretty big fan of the text design over at <a href="http://informationarchitects.jp/" rel="nofollow noreferrer">Information Architects</a>. You may also want to have a look at <a href="http://subtraction.com/" rel="nofollow noreferrer">Subtraction.com</a>. Blogs will probably be a good source of inspiration, as they're typically very text heavy. </p> <p>Good luck.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload