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

May 11, 2012 - 37 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.

.

Related articles:

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

37 Comments

» Comments RSS Feed

  1. Bradley Norris says:

    Thank you! This works great on my iPad 12.9!

  2. Daniel Hunt says:

    Marcos Kirsch cheers, got any code to in large the text in bigger steps? appericate this fix.

  3. Mukund says:

    Paul i thank you from the bottom of my heart for sharing this wonderful trick.

    God bless you.

    I’m having IPhone 6S Plus. whats the use of 5.5 inch display if the font is too small? My earlier Samsung S4 with Opera browser was doing better.

    Even trusted browser Opera is not doing text reflow on iPhone 6S Plus.

    You have solved my big problem with this cute trick.

    Iphone 6S Plus Safari don’t have bookmarks menu. But no problem. I turn phone in landscape mode. Access the book mark and quickly do test font resizing using + and – bookmarks. I can see text resizing while I tap + or – bookmarks.

    Thanks once again.

  4. JohnZimmerman says:

    Any way to do this in Chrome for iOS?

  5. David Ashleydale says:

    That still doesn’t work for me.

  6. F. Roberts says:

    Sorry about that! It seems that the script I pasted is not the bookmarklet I created. Try again:

    javascript:var%20p=document.getElementsByTagName(‘*’);for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(p%5Bi%5D.style.fontSize.replace(%22px%22,%22%22));%7Delse%7Bvar%20s=20;%7Ds+=4;p%5Bi%5D.style.fontSize=s+%22px%22%7D

    That should do it! I just copied and pasted it in. It will make the jump to a larger size much quicker.

  7. Franklin Roberts says:

    Mfripp, please update your scripts! They do not work under iOS 8 on an iPad Mini 2!

    I tweaked the original + one in the article to this and got good results!

    javasycript: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=20;}s+=4;p[i].style.fontSize=s+"px"}

    I changed it to s=20 and to s+=4

    Not being a programmer, I have no idea what I'm doing, but that helped in jumping quickly to a bigger font size rather than the tiny increases in the original script!

  8. Alan says:

    Thank you @mfripp that was driving me crazy making the font smaller and slowly making it larger and larger and larger until it was finally larger than the original size.

    Is there anyway to increase the line heights at the same time? On the New Yorker for example, your script works but you end up with lines of text stacked on top of each other very close.

  9. Jim Julian says:

    Hello,
    Thanks for the scripts.
    the reason for this message is a recent problem with Evernote’s bookmarklet. More and more, pages are detecting my iPhone and redirecting my browser to ‘mobile’ versions. There are obvious advantages to them but there are disadvantages as well. Some of the conent is usually stripped away.
    A more immediate disadvantage is the response if the Evernote app’s bookmarklet’s response. If a mobile page is up when the bookmarklet is used, the placard/card form that pops up is font size dependent. Almost always, the card is so large, only one quarter is visible. The card is not resizable or moveable. Do you have any suggestions I could use? I’ve already sent an email to Evernote with no response.

    Thank you,
    Jim Julian

  10. mfripp says:

    Here are some updated versions of these scripts. If page elements inherit sizes from a style sheet or specify sizes in % or ems (fairly common), the “+” script above may actually reduce the font size before it starts increasing it. The scripts below give more predictable and correct results in these cases.

    I also realized that often all I want is to increase the smallest text to a readable size (e.g., 20 px on my iPhone 4s in iOS 8.1), without changing the headings. So I added a script that just zips through and makes sure everything is at least 20 px. I called this “at least 20”. You can change the behavior of this script by changing the minSize setting at the start.

    at least 20:
    javascript:var minSize=20;var p=document.getElementsByTagName(‘*’);var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p[i]);if(st){s[i]=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s[i]!=undefined)p[i].style.fontSize=Math.max(minSize,s[i])+"px"}

    larger:
    javascript:var p=document.getElementsByTagName('*');var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p[i]);if(st){s[i]=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s[i]!=undefined)p[i].style.fontSize=s[i]*1.1+"px"}

    smaller:
    javascript:var p=document.getElementsByTagName('*');var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p[i]);if(st){s[i]=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s[i]!=undefined)p[i].style.fontSize=s[i]/1.1+"px"}

    • mfripp says:

      I forgot to mention — on iOS 7 and 8 (at least for iPhone), Safari has no bookmarks bar, so you have to put these bookmarklets in your Favorites bookmark folder (or wherever). If you drag them to the top of the list of Favorites, it’s still fairly easy to use them. Safari remembers the last bookmarks folder you used, so you just have to tap the bookmarks icon and then tap the bookmark you want to use.

    • Alan says:

      Is there a way to add line spacing to go with this? On The New Yorker’s website it only increases the font size and you end up with text over top of each other.

  11. […] 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 […]

  12. 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…

    • Reginasan says:

      In addition to giving the bookmark a longer name than – or + as mentioned by others, you can also quickly show favorites (book icon to the left of the safari destination field), and tap the bookmark there if this bookmark is created as a favorite. You can move it to the top of favorites by tapping “edit” in the bottom right of the favorites side bar, sliding it up on the lines symbol right of the title) and the favorites/bookmark/reading list sidebar texts on the iPad DO at least get larger when you increase your preferred iOS font size in settings > display+brightness.

  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. 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?

  15. 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.

    • Reginasan says:

      Chester, I know this is an older post, but I recently ran into the same issue trying to make the bookmarks, and as replied to Joe’s post, the problem is the line number and space that gets copied with the script, and not the encoded characters… Safari will understand those characters, as long as you delete “1 ” from the front… Or “1%20” if already encoded.

  16. 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!!!!!!!

  17. 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.

    • Reginasan says:

      Joe, Copying this script in the isolated code box above in iOS also copies the line number followed by a space followed by javaScript… You will want to remove the “1” and the space either by pasting into a note first, then copying from the note without the leading characters “1 “… Or after pasting into the bookmark destination field, hold your finger over the type until the magnifier appears and “scrub” to the front of the code you just pasted, to delete the “1 “. The bookmarks DO get encoded into %20 for spaces (and lots of other characters) but this doesn’t break the URL as long as you get rid of the leading “1 ” or “1%20”. The altered code examples that appear in comments here do not have the same issue when copied since they do not have line numbers.

  18. 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

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

  20. […] 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 […]

  21. KVSR says:

    It worked perfect. Also on Mac

  22. 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!

  23. 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

  24. 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.

  25. 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

Leave a Reply

 

Shop on Amazon.com and help support OSXDaily!

Subscribe to OSXDaily

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

Tips & Tricks

News

iPhone / iPad

Mac

Troubleshooting

Shop on Amazon to help support this site