Text size in pixels – iteration 1 #section4 The base case shows that in each browser, the default text size is consistently 16px when no styles are applied (other than the browser defaults), and the text scales fairly consistently across the board. Clearly this is not an exhaustive list of browsers, operating systems, or rendering engines, but it covers the majority of users out there today.Įach operating system and browser was run using its default settings.Įvery iteration was tested to see how each browser rendered text at smaller, medium, larger, and largest sizes, along with 90%, 100%, 110%, and 120% page zoom levels, where applicable.įirst it was necessary to verify that browsers provided a consistent baseline from which to start.

The browsers used for testing were Safari 2, Firefox 2 and Opera 9.5α running on Mac OS X Tiger, along with Internet Explorer 6 (IE6) and Internet Explorer 7 (IE7) running on Windows XP with ClearType turned on. Text was set in Arial to aid consistency across operating systems and platforms. The content used for testing purposes was a two-column layout with body copy on the left and a sidebar on the right. With more than a nod to Owen Briggs’s pioneering work of 2002, I have created a base case with six iterations and 161 screenshots. We’ll reach our destination by the traditional method of trial and error. In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms. 3 days of design, code, and content for web & UX designers & devs.

How do i make text bigger in css