Change the Font Size of Web Pages in Safari for iOS with Bookmarklets

May 11, 2012 - 21 Comments

Change font size on Safari for iPad with bookmarklets

Everyone has run into a webpage where the font size is unbearably small on an iOS device, typically a reverse pinch gesture will make the text legible but on some pages that have a fixed width you then have to scroll sideways in addition to up and down. You can sort of get around that font size limitation by using the Reader feature on an iPhone or iPad, but that’s not ideal for every website either. This is precisely what two handy bookmarklets aim to resolve, by creating two fontsize increase and decrease buttons that can be accessed directly in Safari.

This addition is so useful that the concept should probably be included in future versions of Safari for iOS but only time will tell if that happens. In the meantime here’s what you need to do to get this working.

Repeat this process separately for both the increase and decrease functions:

  1. Open Safari on iPad or iPhone and create a bookmark for any page
  2. Tap the Bookmarks button at the top of the screen and choose “Edit”
  3. Edit the newly created bookmark, naming it either a minus (-) or plus (+) symbol and replace the URL by pasting in the appropriate javascript code shown below, depending on the desired function
  4. Save the bookmark change and load a new web page, tap on the + or – buttons to test font size changes live. Refreshing the page restores the font size to it’s default.

Decrease Font Size (-)

1
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"}

Increase Font Size (+)

1
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"}

These bookmarklet tweaks work by editing a bookmark URL and replacing it with a javascript that changes on page behavior, similar custom bookmarklets have allowed us to View Page Source in iOS Safari and even use Firebug on iOS.

This very handy solution comes from Marcos.Kirsch.com.mx, who recommends placing them in the Safari bookmarks bar for easy access.

Enjoy this tip? Subscribe to the OSXDaily newsletter to get more of our great Apple tips, tricks, and important news delivered to your inbox! Enter your email address below:

Related articles:

Posted by: Paul Horowitz in iPad, iPhone, Tips & Tricks

21 Comments

» Comments RSS Feed

  1. Romney says:

    Make sure to tap on “see original” to copy the proper text, pastebin gets in the way.

    • Paul says:

      Oops, fixed with inline code blocks. Thanks for pointing that out.

    • JulieTang says:

      I hate pages that default to Times New Roman. So I adapted the + – bookmarklets to change the font to something more readable. I also created another bookmarklet to change only the font.

      Create a bookmarklet called: Readable Font and save this in the address field

      javascript:var p=document.getElementsByTagName(‘*’);for(i=0;i<p.length;i++){p[i].style.fontFamily="Helvetica"}

      Create another bookmarklet called: 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",""));p[i].style.fontFamily="Helvetica";}else{var s=12;}s-=2;p[i].style.fontSize=s+"px";p[i].style.fontFamily="Helvetica"}

      And finally create a bookmarklet called: 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",""));p[i].style.fontFamily="Helvetica";}else{var s=12;}s+=2;p[i].style.fontSize=s+"px";p[i].style.fontFamily="Helvetica"}

      Enjoy

  2. Thanks for linking! Although I’d rather you redirected the traffic to my site instead of duplicating it here :/

    By the way, it’s http://Marcos.Kirsch.com.mx not kirsh.com.mx [sic].

    • Paul says:

      Sure thing! We typically like to walk through every step of a process so I included the boomarklet steps that you left out, thus the full walkthrough being placed here.

      The URL has been corrected, great tip BTW.

  3. BBL says:

    Great tip thanks… added to my bookmarklets list ^^

    just little suggestion for people like me who thinks it’s too small.. personally instead of – + I used F- and F+

    Here is a picture of the all useful bookmarklets I have now: http://goo.gl/qOAc0

  4. inknzvl says:

    Maravilloso Marcos, thanks! I just test it in this article’s small font size, it works perfect. Now I can see this is what “tap translate” application do. I added the bookmarklet as they tell you in the application and is the same process. Marcos I’m visiting your page now!

  5. KVSR says:

    It worked perfect. Also on Mac

  6. […] this simple workaround hack, however, that’s thankfully and conveniently no longer the case. Our friends at OS X Daily explain: 1. Open Safari on iPad or iPhone and create a bookmark for any page. 2. Tap the Bookmarks button […]

  7. […] quickly change the font size of any text.Font size bookmarklets [The Marcos Kirsch Experience via OS X Daily] […]

  8. gerelee says:

    there is no bookmarks bar in mobile safari on iphone … at least not one that’s visible. i do have a bookmarks bar folder but that’s it

  9. Joe says:

    In IOS6, pasting the code to a bookmark URL appears to work fine. Except it looks like IOS encodes the URL. This looks like there is no way to save the javAscript properly. Re-editing the URL does not display the same value pasted. Just a guess that would explain why the bookmark does not work for me.

  10. henry says:

    fukin dumbass apple, how hard is it to let us zoom and render on a safari page like android does? some pages are so small not even landscape and take care of..!!! sigh.. multibillion company.. SMH!!!!!!!

  11. Chester says:

    Totally agree with Joe, it won’t work in iOS 6 on an iphone because it converts the javascript to the encoded format. End up with gibberish for the “}” and other symbols.

  12. Morphix says:

    I have iOS 5 on my iPad 1 and when I try the bokkmarkelt scrip I get an “invald address” window. Any thoughts?

  13. Morphix says:

    Does not work on my ipad. The url input into the bookmark changes to something else once you close the edit. I can’t believ that the most profitable company in the world can’t build this into their iPad browser! Truly idiotic.

  14. MishMish says:

    This font issue is particularly frustrating on the iPad mini, which obviously hadn’t been released when this was published. The above JavaScript works but, HA!, still screwed! The font on the bookmark bar is so tiny it’s impossible to select any bookmark without using a stylus. And I have small fingers. God help anyone with man hands…

  15. […] Safari: On the iOS side of things you can use use these Safari bookmarklets to increase only the font and text sizes of web pages, without zooming everything as you would with […]

Leave a Reply

 

Shop for Apple & Mac Deals on Amazon.com

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates