em Sizing Questions/Concerns/etc.

[stormy]

I understand the reason Dreamwidth is choosing to use em sizing. It's flexible for screen widths and browser preferences, but not always in a good way. I'm a bit old school with my css and html, and I'm still not a hundred percent familiar on em. Without customizing all the currently offered Tabula Rasa layouts, fonts tend to look huge for me.

The laptop I commonly use is an awkward widescreen 1600 x 900 resolution. Running Firefox with the standard default font settings (Times New Roman, 16pt), all the site scheme pages look normal to me in relation to other web sites.

The site scheme with defaults:
http://img214.imageshack.us/img214/5601/16ptfullresolution.png <-- This is good!

I was advised recently that if I wanted all my layouts to appear smaller without having to go through crazy customize hoops (manually replacing all instances of em to support % variables or pt/px sizes), I should just change my default font in Firefox to be smaller. If I do this, it breaks the site scheme for me and makes it obnoxiously small, even if I lower it down to 14 from 16.

http://img180.imageshack.us/img180/9379/14ptfullres.png <-- Not good.
14pt

http://img185.imageshack.us/img185/2182/10ptfullres.png <-- Not good.
10pt

Typically, on my journal I prefer fonts around 10pt, sometimes even 8pt and the daring 7pt. This is small for some people (a lot of people), but comfortable for me. If I wanted to change just the fonts in Firefox, I would simply use CTRL+Mouse Scroll until the page became readable without breaking the layout, or set a minimum font size ( http://support.mozilla.com/en-US/kb/Text+Zoom ) in Firefox.

My preference would be to keep the profile as it appears in the 16pt preview - with no spacing issues for the icon, and a decent page width and readable font. When it comes to base layouts, though - the fonts are huge because of the 16pt default, and if I start adjusting the font throughout the page, other aspects (tags, comment links, navigation) become practically unreadable.

If I manually hardcode all these changes - setting px, pt, or % for the fonts, I don't have to deal with these problems. But then again, it's a lot of changes, considering even the layout widths are sized to em. It might become increasingly confusing to people trying to customize layouts what em is, and how it affects not only font size, but layout size and proportion.

My first question is: Is there anything I can do aside from manually writing all my own CSS or importing Layer 1 hardcoded LJ layouts? I do almost everything with CSS. I almost never touch the Display, Style, or Color sections in the Customize menu.

My second question is: Would I never be able to submit layouts to Dreamwidth because I prefer to hard code? Are there people who could softcode the sizes without breaking the layout? I know that some of my hardcoding on another computer could be entirely unreadable, but that's with any CSS modification that someone offers. There's always the chance to tweak it.

Of course, anyone with tips/tricks/pointers/insight, feel free to pipe up! Thanks for reading my novel of concerns in any case!

In Short, I want to:

1) Convert px to em easily or figure out a short way to make my layout fonts smaller without elements specified for a smaller em becoming unreadable.

2) I cannot do this with simply setting my browser's default font below 16pt. This breaks the site scheme (pictured above), and naturally - changes every site. All I want to do is change layouts so that the current Dreamwidth offered base layouts scale appropriately for the size I'm looking for.

Sincerely,
Stormy

---

Learned So Far:

http://pxtoem.com/ is a godly site. Learn to love its em/px conversions. ♥

Communities To Note: stylemakers, dreamscapes, & dotitfileit

Wiki Pages To Note: CSS Entry IDs and Classes & Main CSS for S2 Wiki

Additional Images:

Layout: Brittle
Default 1em, Default Firefox 16pt


Style > Font 12pt or Default Firefox 12pt


Those are exactly the same portions of the page. Current Location, Tags, and Link/Reply links become extremely small. The only way so far that this can be fixed is making the em,pt,px, or % of these larger via CSS. Of course, I used Brittle as an example, but it happens on any layout where the em values have a large range between the default/body size and other elements (tags, headers, titles, read/view links).

Comments

[zvi]

(Er, you do know that you don't have to have the navbar set to display: none in your CSS, you can choose not to have it displayed for you or logged out visitors to your journal at http://www.dreamwidth.org/manage/settings/?cat=display Removing the navbar is an accessibility issue, since people use it to switch from your style to display your journal in their own style.)

As regards to the CSS, if you set a percentage size for the body tag (or even the HTML tag) that should flow down for the rest of the sizes set in em.

Alternately, you might want to look into a userscript and apply it to all dreamwidth domains except www.dreamwidth.org

[stormy]

Oh no... the site scheme to me is fine. I want it exactly how it comes. I'm trying to figure out layouts only. I was advised that the easiest way to see things the way I wanted in layouts would be to adjust the browser default font size.

I'm just showing in my pictures why I don't adjust that.

Edit; I added a few additional pictures to the post and some more information for clarity.

[zvi]

Yes, I understand that the site scheme is fine for you, which is why I suggested that you get a userscript that you apply to domains other than www.dreamwidth.org. Pages from www.dreamwidth.org will always be in sitescheme, most pages on other domains will be in someone's journal style, which you can then switch to your style, and, combined with your userscript, it would be at a comfortable size.

[baggyeyes]

I can't comment on the site scheme, because that is one part of the site - greasemonkey scripts notwithstanding - a user cannot change.

As for your layout, have you checked out the resources entries on dreamscapes and stylemakers? Among the links would be a very handy site - PXtoEM, which bills itself as "PX to EM conversion made simple".

I may be wrong, but when you set a default font size for your browser in order to get the site scheme to where you want it, you also alter the way your layout will look. So 16pt that may look fin on the site scheme, may look overly huge on the journal, because the base font isn't set the same. Like I said, I may be wrong, and hopefully someone will correct me. :)


Edited to add: dotitfileit has some site scheme mods, if you're interested.

[stormy]

I had not seen PXtoEM before! That is extremely handy! Thank you! That's exactly what I needed.

I'll check out those other communities now. I haven't seen layoutmakers and dotitfileit yet.

Edit; I added a few additional pictures to the post and some more information for clarity.

[branchandroot]

Is there some problem with using the Style > Fonts section of the Customize page? If you want your journal font to be 7pt, you can set it to be 7pt right there and everything should scale accordingly. If you want to insert the resulting css by hand instead, adding body { font-size: 7pt;} would give you the same result, but that's what the Customize page is there to do for small adjustments like that.

That's the thing about using ems in the layouts. If someone wants to set their base font either tiny or huge, well css that gives margins, padding, etc. in ems will scale according to their choice. That should never be a choice the designer locks the user out of making.

[baggyeyes]

The problem is that the browser's font size has also been changed, so any changes to the sizing in the font tab, won't be accurate.

[branchandroot]

What do you mean? The browser's default font size should not override the font set in the journal customization area unless she's ticked the "always use my settings" box in the browser preferences. In which case, there should not be any problem in the first place, because the site pages would be showing the same font size.

[stormy]

The browser font wasn't changed. I keep it at a default of 16pt. I showed examples of it changed because I got a recommendation to change my browser font so that my layout font size would be smaller. I can't - because of what it does to the site scheme (pictured).

[baggyeyes]

Aha. Now I understand. You can alter right down the line the sizes of the fonts (using %, PX, EM, PT) in the fonts section. Base font sets the stage for the whole page. Then as you go further, you can alter the module header and text fonts. The only CSS you probably need to alter to tweak would be for the entry itself. If you use a DW layout, you can find the entry variables on the Wiki: Entry IDS and Classes, with a good overview here for the S2.V2 S2 CSS.

[stormy]

Thanks for the links. I'll add them to the list of helpful communities/posts/sites above.

[stormy]

I generally don't use the Style > Fonts section, but if I change the body css, then some of the other sections scale too small to read.

For instance, if a layout creator has the comment links sized smaller than the entry text - and I scale down all the fonts, those comment links become minuscule.

Thanks for your input.

[branchandroot]

If you don't like the proportions that a layout designer has used, then, yes, you're stuck digging through the layout css to overwrite the particular bits you don't like. But if what you want is to lightly customize the font sizes without having to rewrite a lot of the css, then you should look at the Fonts section. That's what it's for.

[stormy]

Okay, so that does clarify that my options are limited to css routing and the Style > Font section. I'll stick to CSS then, or now that I've got a better converter for em, just change the CSS em to a higher number.

Edit; I added a few additional pictures to the post and some more information for clarity.

[ninetydegrees]

Remember that you can always set a minimum font in Firefox. I never get too-small-to-read text (typically set to .9em or .8em) because I've set a minimum font size. This is in Options/Content/Fonts and Colors/Advanced.

[stormy]

Yeah, I noted that in the entry. For myself, I'm definitely going to put that into effect (although some people use a a mini font size for spoilers on some sites that you must copy and paste). It seems like if I set defaults anywhere I'll be messing something else up. I think at this point I'll just go through and make changes based on the em sizes I'm comfortable with.

It is nice to get input from others on what sort of preferences they use on the web. Perhaps I'll hold a poll at some point to find out if a majority of people who read my journals and communities have changed the default sizes in Firefox or set a minimum size, and their resolution.

[afuna]

I think you might be better served changing the font size for the entry and comments (in the case of Brittle, defined in ".entry, #comments", or in Style > Fonts > Entry > Size of entry text font), instead of modifying the base font size which does affect other things.

It would have to be done for each style, either via the customization form, or via CSS, as you've deduced, but on the plus side you'd be able to use basically the same CSS whichever style you end up picking, since the core2 layouts share a lot of the same classes.

[stormy]

Yeah, that is the one thing that is nice. Once you get used to the module styles, it's very easy to keep certain customizations across themes.