JavaScript String fontsize() Method

What You’ll Learn

String.prototype.fontsize() is a deprecated HTML wrapper method (same API as MDN String.prototype.fontsize()). It returns a string that wraps your text in a <font size="..."> tag. Learn the old 1–7 size scale, relative +n/-n values, quote escaping, why that element is obsolete, and how to replace it with CSS font-size — with five examples and try-it labs.

Introduction

Early JavaScript included helpers that wrapped text in HTML presentation tags — fontsize(), fontcolor(), big(), small(), and others. They made it easy to inject markup with innerHTML.

Today those wrappers are deprecated. fontsize() still works in browsers for compatibility, but the <font> element itself was removed from HTML. Font size belongs in CSS — with units like rem, em, or px, not a 1–7 HTML attribute scale.

This page is part of JavaScript String Methods. Related topics include fontcolor() and big().

Understanding the fontsize() Method

Calling str.fontsize(size) does not create a live DOM node. It concatenates an HTML string: an opening <font size="..."> tag, the original text, and a closing </font>.

• It is an instance method on strings (auto-boxed if needed).
• It returns a new string — the original is unchanged.
• Double quotes inside size become ".
• No size validation — values outside 1–7 are still pasted into the attribute.
• Prefer CSS font-size for real UI.

📝 Syntax

General form of String.prototype.fontsize:

str.fontsize(size)

Parameters

• size — historically an integer from 1 to 7, or a string like "+3" / "-2" to adjust relative to the default size 3. Coerced to string for the attribute.

Return value

Always an HTML string wrapped in <font size="...">. Special cases:

Common patterns

"Hello, world".fontsize(7);
// 'Hello, world'

"Title".fontsize("+2");
// 'Title'

"Hi".fontsize('3"4');
// 'Hi'

// Prefer this in new code:
const el = document.getElementById("yourElemId");
el.style.fontSize = "2em";

Examples Gallery

Examples follow MDN String.fontsize() patterns. Use View Output or Try It Yourself for each case.

const contentString = "Hello, world";
contentString.fontsize(7);
// 'Hello, world'

<font size="7">Hello, world</font>

"Hello".fontsize("+3");
// 'Hello'

"Hello".fontsize("-2");
// 'Hello'

"Hello".fontsize(3);   // default-ish baseline in the old scale
// 'Hello'

<font size="+3">Hello</font>
<font size="-2">Hello</font>
<font size="3">Hello</font>

"Hi".fontsize('3"4');
// 'Hi'

"".fontsize(3);
// ''

"A".fontsize(7.111);
// 'A'

<font size="3&quot;4">Hi</font>
<font size="3"></font>
<font size="7.111">A</font>

const contentString = "Hello, world";
const html = contentString.fontsize(7);
// document.body.innerHTML = html;  // legacy pattern — avoid in new apps

console.log(html);
// Warning:  is not a valid element in modern HTML

<font size="7">Hello, world</font>
(invalid modern markup — <font> was removed from HTML)

const el = document.createElement("p");
el.textContent = "Hello, world";
el.style.fontSize = "2em";

// document.body.appendChild(el);
console.log(el.style.fontSize);
console.log(el.outerHTML);

// Other modern options:
// el.style.fontSize = "1.25rem";
// el.style.fontSize = "xx-large";

2em
<p style="font-size: 2em;">Hello, world</p>

🚀 Common Use Cases

• Reading legacy tutorials — recognize HTML wrapper methods in old samples.
• Migrating old scripts — replace fontsize() with CSS font-size.
• Teaching string immutability — show that methods return new strings.
• Not for new apps — do not use fontsize() to scale UI text.
• Design systems — use type-scale tokens / utility classes instead.
• Safer markup — prefer textContent + CSS over innerHTML strings.

📝 Notes

• fontsize() is deprecated — standardized only for compatibility.
• The <font> element was removed from the HTML specification.
• It returns a string, not a DOM node.
• It does not validate or clamp the size value.
• Legacy docs describe sizes 1–7 and relative +n/-n vs default 3.
• Other HTML wrappers (fontcolor(), big(), fixed(), …) share the same fate.
• Avoid assigning untrusted strings to innerHTML.

💡 Best Practices