lavalkyrie: (Default)
[personal profile] lavalkyrie
I hope this isn't out of line- I really enjoy reading stories at LJ but I find the physical reading of them difficult due to poor typography. I have been finding lately that I have to zoom in 4-5 times before I get a readable font-size in conjunction w/ an optimal line length.

as a web designer, i'd like to petition the community and all LJ authors to consider making 3 CSS changes to make their entries easier to read.

Increase Font Size


adding this bit of custom CSS to your journal would go a long way by itself:

body {
font-size: 100%;
line-height: 1.5;
}


this sets the font size to the browser default (which is typically 16px). 16px is a heck of a lot easier to read than 12px or worse 11px. line-height refers to the amount of space between lines... also called leading.

Shorter Line Length (aka narrower columns)


the other major problem I see is with line-length. really long lines are quite difficult to read. Optimal line length is around 12 words per line... which means columns that are much narrower than LJ's default 100% width layouts. Think of how easy it is to read a book page... since books aren't 16" wide.  

depending on the look of your journal you might be able to get away with something as simple as

#page {
width: 978px;
margin: 48px auto !important;
}


If that really messes up your layout (and you don't know the first thing about CSS), at least you can still have the bigger font-size.

Contrast


I don't see this one as much, but please don't put light gray font on a light gray background. I am partial to black text on white backgrounds, but reverse (black on white) can work too.... the main thing is that the background and the font colors contrast sufficiently.

How to Add Custom CSS to your LJ Theme


if you are still here and haven't run screaming from my geekery then maybe you might like to apply some of my suggestions, but don't know how. LJ is tricky, and even as a self-professed web pro I've had trouble posting, so I'm sure the thought of editing CSS is enough to make many of you cringe.
Here's how to find the section where you can make CSS adjustments.
  1. from LJ Home- hover over Journal - click on Journal Style
  2. off to the right it will show your current theme - click Customize your theme
  3. Under Customize Your Theme - click Custom CSS
  4. you should come face-to-face with a large text area called Custom Stylesheet... this is where to paste in your new rules
  5. click save changes and your journal should now be a little easier to read.

My thanks to all the authors out there who gracefully share their creativity here. And a few more thank yous to any author who doesn't require me to get a magnifying glass to read their work! :)


EDIT TO ADD:

Since posting this I have found 2 solid bookmarklets:
http://purifyr.com
http://www.readability.com/

that both allow the end user to view any web article in a non-cluttered, easy-to-read way. brilliant! but i would still like to encourage authors to give a thought to their own typography. take care!

Date: 2011-04-04 10:44 pm (UTC)
From: [identity profile] dylanxtra-x.livejournal.com
Thanks so much for the info :) Was able to fix it for my font size at least ^^

Date: 2011-04-04 11:25 pm (UTC)
From: [identity profile] paperscout.livejournal.com
I don't mean to come across as bitchy, and I definitely appreciate your taking the time to explain to people how to change things instead of just complaining about it, but I think it's also important to keep in mind that what's easily readable for one person may not be for another. For instance, the size of the font this entry is posted in is honestly WAY too big for me to read comfortably.

I just also wanted to suggest another option (if you aren't already aware of it), is to click "View in My Style" at the top of the page containing the specific entry you're trying to read. That way, it should conform to whatever standards you have set, which presumably would be more comfortable to you =)

Anyway, like I said, I'm honestly not trying to come across as bitchy, so I hope I'm not. I had a hard time adjusting to reading fic on LJ in a lot of cases until I discovered the View in My Style option.

Date: 2011-04-05 12:02 am (UTC)
From: [identity profile] lavalkyrie.livejournal.com
no problem. i was not aware of "View in My Style"- I will defo check that out. so thank you for the tip.

but quoting from: http://www.informationarchitects.jp/en/100e2r/

"100% is not big." it is the text size browsers display by default. "It’s the text size browsers were intended to display." but you are right that individual preferences play a role (as do browsers, OSs, screen res, etc). You find the default size too big, whereas i am pleased that i don't have to zoom in to read it! ;)

if nothing else, i just want to encourage people to give a thought to how their content is displayed. authors put so much effort into their content... it seems a shame to let bad typography distract from that.

i won't pretend that i have the perfect typographic solution for every case, but there are some guiding principles (like 1.4-1.5 leading, line-length, etc). but if authors will merely ask themselves, "Is this easy to read?" and then spend the 5 minutes making a tweak or two well it would go a long way to making LJ and the web just a little bit prettier (in my not always humble opinion)

thanks again for the tip! happy reading/writing. cheers.

Date: 2011-04-05 07:40 am (UTC)
From: [identity profile] lavalkyrie.livejournal.com
PS- can you point me to where the "view in my style" is? i found "View all journals and communities in my own style" in my account settings but it is a "premium" option.

Date: 2011-04-05 02:00 am (UTC)
From: [identity profile] pdt-bear.livejournal.com
Hi,

Reading this across a couple of communities that you've cross-posted to.

Depending on which browser you're using, I've found the following page quite useful:

https://www.squarefree.com/bookmarklets/zap.html

I'm very fond of the 'zap colors' option. :)

Cheers,
-pdt

Date: 2011-04-05 07:42 am (UTC)
From: [identity profile] lavalkyrie.livejournal.com
running in the same circles eh? :) thanks for the tip! i don't see one for size though... bummer. but it reminds me a little of greasemonkey. maybe i should switch back to firefox for reading LJ and make use of that.

Date: 2011-06-14 02:32 pm (UTC)
From: [identity profile] blowers-daughtr.livejournal.com
I don't know what you're talking about, but I'm using Google Chrome on a MacBook and your font here is WAY too big... It's not 100%, it's bigger than that...

Date: 2011-06-14 02:56 pm (UTC)
From: [identity profile] lavalkyrie.livejournal.com
i still don't think that it was too big (hello myopia!) but you were correct that it was higher than 100%. I tracked down the cause to

.content .entry .entry-text {
font-size: 1.3em;
}

i've since corrected it by adding the following to my custom CSS and my journal text should now actually be at 100%.

.content .entry .entry-text {
font-size: 100% !important;
}

maybe actually being at the font size I am endorsing will help make my point better, b/c LJ journals are still notoriously difficult to read for me.

Date: 2011-06-17 09:22 am (UTC)
From: [identity profile] blowers-daughtr.livejournal.com
I suggest using the zoom feature.

Date: 2011-06-17 02:35 pm (UTC)
From: [identity profile] lavalkyrie.livejournal.com
trust me, i was very familiar w/ the zoom feature. if you read my edits, i have since found:

https://www.readability.com/

which lets me alter sites w/ the tap of the ` key. it's a good enough compromise, though I still hold that LJ could stand better typography since it is primarily focused on "journaling" and therefore "reading".

cheers.

Profile

lavalkyrie: (Default)
lavalkyrie

December 2011

S M T W T F S
    123
4567 8910
11121314151617
18192021222324
25262728293031

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Aug. 17th, 2017 10:35 am
Powered by Dreamwidth Studios