Text to Handwriting (Fun)

About the Text to Handwriting Tool

Your typed text appears in a handwriting-style font over a lined, grid, or blank notebook-paper background, updating live as you type. Hit download and html2canvas captures the preview exactly as shown, saved as a PNG, great for notes, cards, or a personal touch on a digital message.

The ruled paper is pure CSS, not an image file

Both the lined and grid paper backgrounds are built with repeating-linear-gradient, a CSS technique that paints an endlessly repeating pattern of color stops rather than tiling an actual image. The lined version repeats a block of paper color for 37 pixels followed by a 1-pixel line color, over and over down the page, which produces evenly spaced horizontal rules with nothing but color math. The grid version layers two of these gradients on top of each other, one running the default vertical direction and a second rotated 90 degrees for the horizontal lines, combining into a grid pattern from two simple repeating stripes rather than a hand-drawn grid graphic.

html2canvas is the one external library this site leans on, and why this tool specifically needs it

Nearly everything else on this site is built from plain, hand-written JavaScript with no external dependencies, but turning a live, styled DOM element into a downloadable image is a fundamentally different kind of problem than transforming text, and browsers don't expose a built-in API for "screenshot this element." html2canvas solves that by walking the target element and its children, reading their computed styles, and manually redrawing an approximation of what's on screen onto a <canvas>, which can then be exported as a PNG. That's a meaningfully different (and more fragile) approach than a native screenshot, since it's reconstructing the visual output rather than capturing it directly — for the relatively simple styling used on this page (text, solid colors, repeating gradients), it renders reliably, but it's also why this is the one tool on the site that pulls in an external library rather than working entirely from scratch.

Downloaded images render at double resolution

The download call passes scale: 2 to html2canvas, which renders the captured canvas at twice the pixel density of what's actually displayed on your screen. That produces a sharper PNG than a plain 1:1 screenshot would, particularly noticeable if you zoom in on the downloaded image or print it, at the cost of a file that's roughly four times the pixel area (double the width and double the height) of the visible preview.

Line spacing scales with font size, but the paper's ruled lines don't

The text's line height is set as a multiplier of the font size (2.1 times whatever size you've chosen), so moving the Font Size slider changes how far apart each line of your handwriting sits. The paper's ruled lines, on the other hand, are drawn at a fixed pixel spacing regardless of font size, since they're a separate CSS background pattern with no awareness of the text sitting on top of it. That means the visual alignment between your handwriting and the ruled lines will shift somewhat as you move the slider away from the default size, since only the text's line spacing is responding to that control.

The handwriting font is a real, widely used Google typeface

The cursive-style lettering comes from Caveat, an open-source handwriting font distributed through Google Fonts and loaded the same way this site loads its other web fonts, via a stylesheet link rather than a custom image or SVG-based lettering system. Because it's a genuine variable-width font rendered by the browser like any other text, it inherits normal text behavior — it reflows to fit the available width, respects line breaks from your original typed text through the CSS white-space: pre-wrap rule, and can be selected or resized just like ordinary text, rather than being a static picture of handwriting with your words baked in.

Three fixed ink colors, not a full color picker

Ink Color offers exactly three preset options — a blue reminiscent of a ballpoint pen, black, and a dark red — rather than an open-ended color picker. That's a deliberate narrowing to colors that actually look like plausible pen or ink choices on paper; a full color wheel would let you pick colors that break the illusion of real handwriting, like neon green or bright yellow, which would undercut the specific effect this tool is going for.