Font Type Size Ideas
Last Post 02/15/2008 9:34 AM by David. 2 Replies.
Author Messages
David
Nuke Master
Nuke Master
Posts:152


--
02/14/2008 12:39 PM
    I have been looking at tools, code and lectures from Yahoo's performance and User Interface groups.  They have a set of CSS and JS called YUI library that is public and is what Yahoo uses to make its pages. 

    I was even thinking about making a skin that used some of it, but changed my mind.

    One thing I did learn and have put into use on my skins now, is that Yahoo thinks like us and wants users to be able to change font sizes. They have done a good deal of research into the "right sizes."  They set the base size to what they believe is 13px using the "small" or browser specific setting - but not using pixels! Then every thing is set in percentages, but using very specific numbers that they have determined work the best withing a wide range of browsers.

    10px = 77%
    11px = 85%
    12px = 93%
    13px = 100%
    14px = 108%
    15px = 108%
    16px = 123.1%
    17px = 131%
    18% = 138.5%
    19px = 146.5%
    20px = 153.9%
    21px = 161.6%
    22px = 167%
    23px = 174%
    24px =182%

    What prompted me from using some of thier layout is a skin what that they set the widths of columns in "ems" in many cases. In these cases they use the "holy hack" to override the firefox setting with the IE setting in 100's of places. The resulting CSS code doesn't comply with W3C

    However I suspect that my titles and headings will display better on a wider range of browseres as a result of using these percentages.

    /DaveS
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    02/15/2008 2:38 AM
    Interesting, yes I want to spend some time having a look around the YUI library. - interesting they have opted for the Holly hack, I thought they would have implemented a nice way of managing their hacks - well, let us know how you get on in your experiments.

    Cheers,
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    David
    Nuke Master
    Nuke Master
    Posts:152


    --
    02/15/2008 9:34 AM
    There were several things that made me lose interest in doing more with the YUI library.
    • There CSS fails W3C
    • There HTML is only 4.0 and fails W3C
    • There grid templates and classes rely on "ems" for column and page widths and to make the widths for IE and "the rest" the same they have the holy hack in a 1000 places.
    • You couldn't easily use the grids in a DNN skin.
    The three things that I did walk away with were the font sizes and the f"ixed column widths" for their layouts that are sized to work with national advertising sizes, and their "reset" which appeared to cover a few items mine didn't.

    This was not what I had hoped for.  Hope that you are able to find more in it.
    /Dave


    ---