{"action":"created","issue":{"url":"https://api.github.com/repos/18F/usfwds/issues/406","labels_url":"https://api.github.com/repos/18F/usfwds/issues/406/labels{/name}","comments_url":"https://api.github.com/repos/18F/usfwds/issues/406/comments","events_url":"https://api.github.com/repos/18F/usfwds/issues/406/events","html_url":"https://github.com/18F/usfwds/issues/406","id":104500219,"number":406,"title":"[Need input] max-width line length guidance: 75 char max, 2/3 grid width...or something else?","user":{"login":"mollieru","id":3680494,"avatar_url":"https://avatars.githubusercontent.com/u/3680494?v=3","gravatar_id":"","url":"https://api.github.com/users/mollieru","html_url":"https://github.com/mollieru","followers_url":"https://api.github.com/users/mollieru/followers","following_url":"https://api.github.com/users/mollieru/following{/other_user}","gists_url":"https://api.github.com/users/mollieru/gists{/gist_id}","starred_url":"https://api.github.com/users/mollieru/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mollieru/subscriptions","organizations_url":"https://api.github.com/users/mollieru/orgs","repos_url":"https://api.github.com/users/mollieru/repos","events_url":"https://api.github.com/users/mollieru/events{/privacy}","received_events_url":"https://api.github.com/users/mollieru/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/18F/usfwds/labels/help%20wanted","name":"help wanted","color":"bfe5bf"},{"url":"https://api.github.com/repos/18F/usfwds/labels/user%20experience","name":"user experience","color":"ff69b4"},{"url":"https://api.github.com/repos/18F/usfwds/labels/visual%20design","name":"visual design","color":"207de5"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-09-02T14:57:51Z","updated_at":"2015-09-10T02:20:21Z","closed_at":null,"body":"Calling on design minds to give us some feedback. We've been tussling with the conundrum of how to provide guidance on line length for text.  \r\n\r\nOriginally, we'd suggested using the best-practice 75 characters (or 53rem) max-width (lots on this here: http://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/).  However, when we implemented this on our site, we all agreed the text blocks felt very narrow. Here is the result, in two contexts:\r\n\r\n![screen shot 2015-09-02 at 10 45 01 am](https://cloud.githubusercontent.com/assets/3680494/9634824/6a64a0a6-5161-11e5-977a-27af99e5a6fb.png)\r\n\r\n![screen shot 2015-09-02 at 10 46 15 am](https://cloud.githubusercontent.com/assets/3680494/9634815/63180d38-5161-11e5-8d4a-9a453066d7f3.png)\r\n\r\n\r\nWe are considering expanding to 2/3 of our grid (or 65rem).  Here is the result in the same two contexts:\r\n\r\n![screen shot 2015-09-02 at 10 45 30 am](https://cloud.githubusercontent.com/assets/3680494/9634826/6f61dca4-5161-11e5-82a0-a13afbffbc7f.png)\r\n\r\n![screen shot 2015-09-02 at 10 46 36 am](https://cloud.githubusercontent.com/assets/3680494/9634805/5d244888-5161-11e5-9b57-5699a5825230.png)\r\n\r\nWould love to quickly see how this guidance would play out in a few of the products you guys are working on @jenniferthibault @jjoteal @ericronne @kharshawat @emilyville @mebates @dannychapman -- and any other thoughts you have on the matter.  We're hoping to make a call on this today (Weds, Sept 2). \r\n\r\ncc @angel @carodew @colinpmacarthur "},"comment":{"url":"https://api.github.com/repos/18F/usfwds/issues/comments/139097387","html_url":"https://github.com/18F/usfwds/issues/406#issuecomment-139097387","issue_url":"https://api.github.com/repos/18F/usfwds/issues/406","id":139097387,"user":{"login":"jpyuda","id":552095,"avatar_url":"https://avatars.githubusercontent.com/u/552095?v=3","gravatar_id":"","url":"https://api.github.com/users/jpyuda","html_url":"https://github.com/jpyuda","followers_url":"https://api.github.com/users/jpyuda/followers","following_url":"https://api.github.com/users/jpyuda/following{/other_user}","gists_url":"https://api.github.com/users/jpyuda/gists{/gist_id}","starred_url":"https://api.github.com/users/jpyuda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpyuda/subscriptions","organizations_url":"https://api.github.com/users/jpyuda/orgs","repos_url":"https://api.github.com/users/jpyuda/repos","events_url":"https://api.github.com/users/jpyuda/events{/privacy}","received_events_url":"https://api.github.com/users/jpyuda/received_events","type":"User","site_admin":false},"created_at":"2015-09-10T02:20:21Z","updated_at":"2015-09-10T02:20:21Z","body":"I tend to think @msecret is right in terms of implementation details (though I tend to agree we would incur too much risk to change this right now).\r\n\r\nIn general, the max-width as implemented here is probably over-simplified. The 45-to-75 character rule of thumb (for single-column text, 66 is often recommended) is:\r\n* a _rule of thumb_, not necessarily something to be followed in a hard-and-fast way\r\n* meant to refer to long-form copy. Shorter pieces of text (like the alerts mentioned above, footnotes, pullquotes, headers, etc.) can often have longer line lengths comfortably.\r\n* only one dimension: legibility is affected by line length, leading (line height), typeface, weight, and other factors\r\n\r\nAlso of note, the average characters per line will vary by typeface and, in some cases, type size (depending on the type design). It will definitely vary based on roman/italic/bold.\r\n\r\nI'm thinking about how to boil down a topic as complicated as typography (there are entire books written on the topic, after all) into guidance that can be generally applicable. But it's probably right to offer guidance, not limits in this case."}}