jquery - Manage tiny fonts visualization with CSS/Javascript in Firefox -

i trying create website in navigation based on zoomable contents.

for instance, here screenshot of can see after opening webpage:

then, using zoom.js "zooming" page , able read text. however, after magnification got this:

the font-size set 9.4%, , can see causes characters overlapped , not correctly positioned.

i tried use jquery plugin fittext.js or jquery textfill, see if changed font-size in "magic" way solve issue; unfortunately had effect in solving visualization issue.

so question is: how can make font looking "normal"? there jquery plugin or other js library manage problem?

i using firefox, , prefer focus on using browser moment.

as suggested nico o , ed plunkett in comments, solution problem start big page, in 20 times bigger desired page size. added following css scale 20 times smaller:

body {     transform: scale(0.05);     transform-origin: 0 0; } 

when need zoom on point, add new transformation parameters in css, changing transform property (i used jquery, can done in many other ways):

$("body").css("transform", "scale("+scale_factor+") translate("+translate_data+")"); 

note didn't need additional library (with exception of jquery) this.