Original font size

Font size bookmarklets

Last night I was reading some online documentation on Safari on my iPad and was annoyed by the small font size. On most web sites, the text is formatted in narrow columns and you just double tap to zoom in perfectly. In this case that wouldn’t work well because the text spans from edge to edge on the site. You’ve probably bumped into a similar situation on your iPhone or iPad.

This morning I looked around for a solution. I didn’t find exactly what I was looking for ; but I combined and modified some of the things I found and created two bookmarklets: one that increases the font size of the page you are in, and one that decreases it.

There are two ways to install them.

Method A

If you use iCloud to synchronize bookmarks between Safari on your Mac or PC and your iPhone/iPad, then the easiest way is to do this from your computer. Just drag the two links below to your Bookmarks Bar.

Let iCloud take care of the syncing for you.

Method B

If you need to do this from your iPhone/iPad because you don’t use iCloud for syncing bookmarks, then things are a little harder. I won’t describe the process here because others have already done a great job. The only difference is that you will use the code from my bookmarklets:

Font-:

javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s-=2;p[i].style.fontSize=s+"px"}

Font+:

javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s+=2;p[i].style.fontSize=s+"px"}

Once you have installed the bookmarklets, use them the same way you use a bookmark. I recommend putting them on the Bookmarks Bar for quick access, as shown:

Bookmarklets on iPad

This is how the original website looks:

Original font size

And this is how it looks after increasing the font size a couple of times:

After increasing the font size using the bookmarklet.

In order to reset the font size back to its default, just reload! Hope you find this useful.

34 thoughts on “Font size bookmarklets”

  1. This is by far the most useful post I have seen on this blog for years. I have also often been frustrated with small fonts in a small screen, and could not believe that the supposedly super user-friendly iOS couldn’t do anything about it. I don’t use iCloud, so I had to do it the ‘hard’ way, but even that was easy enough. Thanks!

  2. Very nice Marcos,

    I modified your code (as a function) to be used in Firefox. It is very cool. It should work in other browsers too.

    Font++
    javascript:(function(){var p=document.getElementsByTagName(‘*’);for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s+=2;p[i].style.fontSize=s+"px"}})()

    Font–
    javascript:(function(){var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s-=2;p[i].style.fontSize=s+"px"}})()

    As you must know, you can just do the same in Firefox and others browsers in websites that has been built with accessible options without specials tricks. Readers can look at
    http://www.w3.org/WAI/changedesign

    Best regards,
    Soub

    1. Help: when pasting the javascript, do I include the word “JavaScript”? As in paste whole of this:

      JavaScript:var p=document.getElementsByTagName(‘*’);for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s-=2;p[i].style.fontSize=s+"px"}

      Or just this:
      var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s-=2;p[i].style.fontSize=s+"px"}

      If you meant the later. As in without the word JavaScript, then how do you get round the fact that safari bookmark edit tends to add"http://&quot; to our URL entry by default?

  3. Bless you; one of the most useful pieces of code for mobile devices; my eyes and the eyes thousands of others thank you.

  4. great tip!
    I saw this on OS X daily, I thought I should thank you here too!

    I hope this keeps working even after safari updates in the future

  5. Many thanks for your text-size bookmarklets. I’d found and tried some others first, but they didn’t work for me; yours did.

    I found that the nice bold plus and minus signs from the math pane of the emoji alternate keyboard made perfect bookmark-bar labels for them.

    Now if only Apple would get around to building a text-size preference into mobile Safari as they should have in the first place!

  6. Great tips. I’m getting a mini for Christmas so have installed the bookmarklets via method 2 to my ipad 3 just to be ready. Had no trouble following the instructions and they both worked first time.

    Thanks!

  7. Hi Marco,
    I was searching for bookmarlets for increasing fonts and decreasing them, but after seeing the images you posted I also discovered that ‘bookmarks bar’ could also be created on safari.
    Earlier I used to click on ‘the book’ icon on safari and from there would select the bookmarklet to use but now not.

    Thank you.
    Regards

    Yuvraj

  8. Thanks Marco,

    but unfortunately the horizontal scrolling for the code string does not work on the iPad (or at least I could not figure it out). I had to switch to the PC to copy it :-(
    Maybe better a plain text paragraph?

    Regards
    Mateo

  9. Try this:

    javascript:var d=document.getElementsByTagName(‘*’);for(i=d.length-1;i>=0;i–){d[i].style.fontSize=(parseFloat(window.getComputedStyle(d[i],null).fontSize)*1.2).toFixed()+’px’}

    It works more reliably (from my testing) and augments the font size proportionally (by 20%).

Leave a Reply