Change the Font Size of Web Pages in Safari for iOS 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:
- Open Safari on iPad or iPhone and create a bookmark for any page
- Tap the Bookmarks button at the top of the screen and choose “Edit”
- 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
- 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.
Thank you! This works great on my iPad 12.9!
Marcos Kirsch cheers, got any code to in large the text in bigger steps? appericate this fix.
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.
Any way to do this in Chrome for iOS?
That still doesn’t work for me.
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.
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!
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.
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
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"}
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.
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.
[…] 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 […]
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…
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.
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.
See reply to joe’s post above
I have iOS 5 on my iPad 1 and when I try the bokkmarkelt scrip I get an “invald address” window. Any thoughts?
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.
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.
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!!!!!!!
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.
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.
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
[…] quickly change the font size of any text.Font size bookmarklets [The Marcos Kirsch Experience via OS X Daily] […]
[…] 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 […]
It worked perfect. Also on Mac
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!
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
Hey BBL, how did you get a black browser window?
Well I enabled private browsing for safari… If you wanna know how to enable check here: https://osxdaily.com/2011/10/21/private-browsing-ipad-iphone-safari/
But I don’t recommended you to do so, because Safari will not save a record of browser history, cache, logins…
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].
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.
Thanks. It bothered me so I figured out a way to address it. Then I figured that I couldn’t be the only one so it was worth sharing :)
Make sure to tap on “see original” to copy the proper text, pastebin gets in the way.
Oops, fixed with inline code blocks. Thanks for pointing that out.
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