Heads-up: font size adjustments

[fu]

A quick heads-up: We're about to adjust font sizes for some layouts.

We've been trying to make our layouts as accessible as possible, out-of-the-box. Too-small font sizes can cause issues for some viewers -- for users with low vision, or users using large screens with higher resolutions, for example -- so we'd like to make sure all our layouts respect the viewer's desired font size, rather than overriding their preferences.

We were able to do this for the majority of layouts, but we weren't always able to catch this especially with the earlier layouts. So we're going to fix this for the five remaining affected layouts: Bases, Blanket, Funky Circles, Sunday Morning, Transmogrified.

So what's going to change?

If you're using one of the layouts above, the font size for entries, etc, will likely become larger. We've tried to adjust the other font sizes (entry titles, journal titles), so that these are not super-huge in comparison to before, but some will likely also be larger than before.

If you're using one of the layouts above, but you have your own highly-customized styleseheet, and have the "use layout's stylesheet" option unchecked, then you won't see any difference at all.

ETA: If you've changed the font size, but not the font unit, you'll likely find that you have gigantic text. If that happens, you can switch your font size to 1em, or switch your font unit to px or pt, and then adjust to taste from there. You can also switch back to the old font size and units, as described below.

For reference, I'm noting all the font sizes that have changed below the cut. There are also instructions at the very bottom if you'd like to change back to the old (current) font size settings.

Bases

Setting	Old Size	New Size
Base font	12px	1em
Journal title	3em	2.25em
Journal subtitle	1.5em	1.125em
Entry titles	1.667em	1.25em

# original font size settings set font_base_size = "12"; set font_base_units = "px"; set font_journal_title_size = "3"; set font_journal_subtitle_size = "1.5"; set font_entry_title_size = "1.667";

Blanket

Setting	Old Size	New Size
Base font	0.625em	1em
Journal title	1.3em	1.25em
Entry titles	1.6em	1.5em

# original font size settings set font_base_size = "0.625"; set font_journal_title_size = "1.3"; set font_entry_title_size = "1.6";

Funky Circles

Setting	Old Size	New Size
Base font	15px	1em

# original font size settings set font_base_size = "15"; set font_base_units = "px";

Sunday Morning

Setting	Old Size	New Size
Base font	0.813em	1em
Module headings	1.1em	1.353em

# original font size settings set font_base_size = "0.813"; set font_module_heading_size = "1.1";

Transmogrified

Setting	Old Size	New Size
Base font	10pt	1em

# original font size settings set font_base_size = "10"; set font_base_units = "pt";

Going back to the old values

Easy way, through the wizard (will only work if you change them once the new settings have come into effect)

1. Go to Customize your Journal Style


2. Scroll down to the Fonts section


3. Click "expand all"


4. Use the tables above for your layout, to compare and replace the current settings. Save.

Slightly more complicated way (bulk update of settings, will work if you change them now)

1. Go to Customize your Journal Style


2. Don't make any changes; hit the save button. This makes sure that our next step will work


3. Go to your list of layers. Look for your layout name (it will be something like "Child of layer x: Layout Name"), then edit the layer of type "wizard" with the highest id.


4. Look for your layout section above, and copy-paste the contents of the textarea. Save.

Comments

[tyger]

....this is the best idea ever. Font sizes that change computer-to-computer! Less likelihood that you're going to hurt someone's eyes because you don't have a million and one screens to test on! \o/ AWESOME!
I'm assuming it's the 'em' that does that? NOW I KNOW WHAT IT DOES. Sweet! *happydaaaance~~*

[foxfirefey]

By setting all the font sizes to 1em, you're telling the browser to use the default font size in the browser's preferences as the base size. Then, you can adjust in comparison with that font size--for instance, .9em is 90% of the size of 1em.

[tyger]

SO AWESOME. \o/ *is going to use em forevermore, yessss~~*

[marahmarie]

I love that. I've noticed that it's carried over from the "old way" (pixel-based sizes) which I have personally tried to avoid like the plague since I started coding. I can't stand locking anyone into font size, especially with computer screens these days that vary from teeny-tiny (mobile and/or Win '98 on 600 x 400 res) to huge (LCD monitors the size of flat panel home theater TVs). Doing without liquid width on most layouts I like is bad enough; I want to at least keep the fonts flexible.

[timeasmymeasure]

Using "em" instead of "px" is a really good idea. I should probably start using this when I modify layouts.

Thanks for this =D

[kake]

Thank you, thank you, thank you.

[mackiedockie]

Many, many thanks for addressing the font size issue! I have recently realized that I skip a lot of content for the simple reason it was ts; dr--too small; didn't read.

[foxfirefey]

This won't remove that possibility entirely, since people still have the ability to set a base font size for their journal, even if it's not the default.

However, if you use the nav strip, there are links to light and your style when viewing an entry page in someone else's style.

[poulpette]

♥ ♥ ♥ This? Is awesome.

[nostariel]

 

[auroraprimavera]

This makes me happy :D

[rainbow]

Thank you very, very much for posting such clear directions on how to go backward; I'd missed this entry and was freakingout when my journal suddenly changed.

(And thank you again, Yvi, for the pointer to here.)

[florahart]

Thanks for putting this up ahead of time so it would be sort of vaguely sitting there in my brain when I started wondering what on earth happened to embiggen all my fonts but only at DW and then was all ...waaaaitaminute, I think... I mean, then I just had to remember where I saw it, but it was totally painless to fix. :)

[ninetydegrees]

A note if I may: people who have customized their font should really check the unit at http://www.dreamwidth.org/customize/options because switching from 8px to 8em makes one heck of a difference. ;) The wizard layer would have kept the 8 but maybe not the px since it was the default unit.

[fu]

Oh oops. Thank you -- I see that the word has spread a bit, but I've also added some information about this, very belatedly, in the entry.

[justhuman]

Question from the customizing inept :-)

I've been using Sunday Morning and I guess the font update has occurred, because I'm being blinded by the new *HUGE* font. But if I used the customization listed above, I'll be creating an accessibility issue for people viewing my journal, because they won't be able to resize the font?

So what's the style of this journal, because this font looks like a good size for me. ...unless this one is going to get changed to.

[justhuman]

Okay, I think I figured it out. I went to the style page and set the base font size to .9 em -- which means I get a size that works for me and others can re-size the font in their browser?

[ninetydegrees]

Something like that. Think of em as a percentage: 1em is 100% and 0.9 a little less obviously. If user A has set their browser to use 16px (or medium for IE users) as their preferred font size then they will see your layout with a little smaller font, say 15px. If user B has set their browser to use 12px (maybe smallest for IE users) let's say they will see your layout in 11px. Before, if your journal font size was set to a fixed unit like 12px it would have been fine for user B but user A would have had trouble reading your journal because it wouldn't have been rescaled at all for them. Now it's pretty comfortable for everybody.
And the best thing is that some browsers allow you to override any setting so that the font is always the same size and corresponds to your level of comfort.

[yourlibrarian]

Much appreciated. I wish another thing websites would do is stop using grey font color on white. It's surprisingly common and often enlarging the text is not that helpful.