Setting a Default Zoom Level for Chrome Browser

Update (2012-5-19): On Chromium/Chrome 19, open ‘Settings‘, click ‘show advanced settings‘ at the bottom, scroll to ‘Web content‘, change ‘Page zoom‘.

Update (2011-3-9): Google has released into the stable release channel Chromium/Chrome 10, which supports the global default zoom level setting mentioned in the earlier update below. Those on Windows should already be using this new release and those on major linux distros won’t have to wait for too long, hopefully.

Update (2011-1-20): Although not available in the current stable release channels (8.0.552.* series) yet, recent versions of Chromium/Chrome 9 and 10 (available from https://sites.google.com/a/chromium.org/dev/getting-involved/dev-channel) include support for user-selectable global default zoom level, which can be accessed at ‘Settings – Under the Hood – Web Content – Page Zoom’. The zoom level choices are the same as those available in the ‘Zoom’ menu entry and apparently not customizable.


Big LCDs with their high resolutions are now dominating the desktop display market. Unfortunately, internet content has yet to catch up with this not-so-new development. Although it has become rarer and rarer to see statements like ‘Best viewed at 800×600′, a significant part, if not a great majority, of web content has simply not been designed to display on anything with a resolution higher than 1024×768. Surfers often find themselves unconsciously leaning towards the screen to make out the small fonts. White spaces left by websites in their visitors’ browser windows have become so common, that online advertising companies have even come up with special types of ads that are specifically designed to fill this emptiness.

Fortunately, most, if not all, modern browsers boast the capability of both text zooming and full-page zooming. The one with the best solution, indisputably, is Firefox with its NoSquint add-on, which provides both default and site-specific zooming. IE8 allows the user to set one zoom level that is applied to all sites and anything other than that has to be set manually. The situation of Chrome (and Chromium) is a bit awkward at the moment. On the one hand, it memorizes user-set zoom levels for all sites visited, so that on subsequent visits, the site’s content will be automatically zoomed. On the other hand, there does not seem to be an option to set a default zoom level for all sites, which both Firefox, through NoSquint, and IE8 provide. What all this comes to is that every time I visit a new website in Chrome, I have to manually zoom it to fit my 1920×1080 display. That is at least two ctrl-+ or ctrl-wheelup for EVERY new site I visit. And should I have to re-install OS and lose all configuration from previous Chrome install, I will have to do it for EVERY site, AGAIN. I feel exhausted already just describing the process.

That’s enough ranting for now.

Like Firefox, Chrome also allows people to create ‘extensions’ to the browser and not surprisingly, people similarly annoyed by the situation have come up with quite a few attempted solutions, which are readily available from Google’s Chrome extension gallery.

But there is also an easier way, much easier IMHO. Since earlier this year, Chrome has incorporated support for user-defined custom stylesheets. What this means is that Chrome user is able to restyle the look and feel of every website he or she visits [1]. This also provides a direct solution to the ‘default zoom level’ issue.

Chrome loads user-defined stylesheets from the ‘User StyleSheets’ folder. In Linux, this folder is usually located in ‘~/.config/google-chrome/Default’. In Windows, this folder is in ‘%USERPROFILE%\Local Settings\Application Data\Google\Chrome\User Data\Default’ for XP and ‘%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default’ for Vista and above. Chromium has slightly different folder names [2]. There should be an empty Custom.css file in the ‘User StyleSheets’ folder. Just add the following lines to the Custom.css file and save.

body
{
  zoom: 1.5;
}

Styles defined in Custom.css will be applied to all websites visited. The above lines will automatically zoom every website to a pre-defined level of 150% (=1.5). In cases where 150% is not ideal and manual zooming is used, Chrome’s built-in zoom-memory will kick in and on subsequent visits, zoom the content to the manually set level instead of the pre-defined 150%.

In short, four lines of code, along with Chrome’s built-in features, pretty much achieves the basic functions of NoSquint on Firefox: default zoom level plus site-specific zoom level.

[1] http://userstyles.org/

[2] http://www.chromium.org/user-experience/user-data-directory

This entry was posted in Web and tagged , , , , . Bookmark the permalink.

5 Responses to Setting a Default Zoom Level for Chrome Browser

  1. D B says:

    Thanks a lot! This works very well for using Google Chrome in High DPI monitors such as Macbook Retina display.
    Just open “properties” of the shortcut to Google Chrome and in the “compatibility” tab, “disable display scaling on high DPI settings.” Then, follow the instructions on this page (“Settings” –> “show advanced settings” –> “Web content” –> “Page zoom”) and set the “page zoom” level to 150%.

  2. darius says:

    in windows seven the file sits in C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
    and works wonders, for my 1080p the optimal zoom was 1.25
    thanks!!

  3. Patrick says:

    Hello,

    I have been looking for the file ‘~/.config/google-chrome/Default’ in Ubuntu 10.1 and can’t seem to find where to find this file, I have searched high and low. I was wondering if you could help me find it?? Thanks in advance for any help, this is really driving me crazy.

    Cheers,

    Patrick