D forums now live!

[Jacob Carlborg]

On 2012-02-15 16:57, Nick Sabalausky wrote:
> "Ludovic Silvestre"<ludovic.silvestre at gmail.com>  wrote in message
> news:yuepxdfcgjebpkkhjnny at dfeed.kimsufi.thecybershadow.net...
>>
>
> I was wondering why the text seemed to be a completely different size on
> different browsers!
>
>> First of all, I recommend to use % for the body's font-size (which you are
>> already using) and the rest should be set with em. That way, the body
>> font-size will be equal to the browser default font size, and the rest of
>> the page will be based on that size.
>>
>
> Yes. This.
>
>> Another suggestion is using something like this:
>> http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/
>>
>> Here is an example of the js code:
>> function updateFontSize(){
>>    msg = document.body.clientWidth;
>>
>>    var font_math = Math.round( 0.012 * msg * 10 );
>>    font_math = font_math<  100 ? 100 : font_math;
>>
>>    $( "body" ).css({
>>        "font-size" : font_math + "%"
>>    });
>> }
>>
>> Use that function on page load and page refresh:
>> $( window ).resize( ... )
>> $( document ).ready( ... )
>>
>
> That's not good (and I don't mean because of the JS - it's always possible
> to have non-JS fallback). This is a classic case of narrowly optimizing for
> one specific metric (ie, getting a consistent words-per-line) instead of
> always keeping an eye on the big picture. The problem this creates is that
> font sizes become too uncontrolled:
>
> First of all, shrinking the window *should* re-flow the text, not cause it
> to be too small to read. A shorter line length is *much* better than tiny
> text.

This site is a great example of a design that reflows when resizing the 
window: http://upperdog.se/ . It works great on both desktop browsers 
and mobile devices.

-- 
/Jacob Carlborg