JavaScript String fontsize() Method: Setting Font Size

The fontsize() method in JavaScript is used to display a string with a specified font size. This method wraps the string within a <font> HTML tag, setting its size attribute to the provided value. While this method is straightforward to use, it’s essential to understand its limitations, especially regarding modern web development practices.

Purpose of fontsize()

The primary purpose of the fontsize() method is to quickly modify the font size of a string when rendered in an HTML document. It can be useful for creating dynamic text elements where font sizes need to be adjusted programmatically. However, modern web development practices generally favor CSS for styling text, offering better control and flexibility.

Syntax

string.fontsize(size)

Parameters

Parameter	Type	Description
`size`	Number or String	The size of the font, specified as either an integer (1-7, where 1 is the smallest and 7 is the largest) or a string with a relative size value (e.g., “+2”, “-1”).

Return Value

• A new string wrapped in a <font> tag with its size attribute set according to the size argument.

Note: The fontsize() method is not recommended for modern web development. Using CSS properties such as font-size is a more effective way of controlling text appearance. ⚠️

Basic Examples

Let’s begin with some simple examples to understand how the fontsize() method works.

Example 1: Using Integer Values

<div id="fontsize-example1"></div>
<script>
  const str1 = "Hello";
  const result1 = str1.fontsize(3);
  document.getElementById("fontsize-example1").innerHTML = result1;
</script>

Output:

The output of this code will be “Hello” rendered with a font size equivalent to the number 3.

Example 2: Using Different Integer Sizes

<div id="fontsize-example2"></div>
<script>
  const str2 = "World";
  const result2_1 = str2.fontsize(1);
  const result2_2 = str2.fontsize(5);
  const result2_3 = str2.fontsize(7);
  document.getElementById("fontsize-example2").innerHTML =
    result2_1 + "<br>" + result2_2 + "<br>" + result2_3;
</script>

Output:

This example demonstrates different font sizes for the same text by setting the size attribute to 1, 5, and 7 respectively.

Example 3: Using Relative Size Values

<div id="fontsize-example3"></div>
<script>
  const str3 = "JavaScript";
  const result3_1 = str3.fontsize("+2");
  const result3_2 = str3.fontsize("-1");
  document.getElementById("fontsize-example3").innerHTML =
    result3_1 + "<br>" + result3_2;
</script>

Output:

This example showcases the use of relative size values using + and - operators, which change font sizes relative to the base font size.

Complex Examples

Let’s look at a more advanced example where we combine the fontsize() method with dynamic changes.

Example 4: Interactive Font Size Change

<div id="fontsize-example4">
  <p id="text-to-change">Click the button to change my font size</p>
  <button id="size-button">Change Font Size</button>
</div>
<script>
  const str4 = document.getElementById("text-to-change").textContent;
  const button4 = document.getElementById("size-button");
  let currentSize4 = 3;

  button4.addEventListener("click", () => {
    currentSize4 = currentSize4 === 7 ? 1 : currentSize4 + 1;
    const result4 = str4.fontsize(currentSize4);
    document.getElementById("text-to-change").innerHTML = result4;
  });
</script>

Output:

Clicking the button dynamically changes the font size of the text.

Note: This example demonstrates how you can use this method dynamically, but again CSS offers a more robust and standard method for such interactivity. ⚠️

Using fontsize() with HTML Canvas

Although fontsize() directly alters the HTML output and not the Canvas context, it’s worth noting that you can use this method to generate the HTML that is injected into page and see how the font changes, but this does not affect the canvas drawing itself.
Canvas does not understand these HTML tags. Here is an example:

<div id="fontsize-example5">
 <canvas id="myCanvasFontSize" width="200" height="100" style="border: 1px solid black;"></canvas>
</div>
<script>
  const str5 = "Canvas Text";
  const result5 = str5.fontsize(4);
  const canvas5 = document.getElementById("myCanvasFontSize");
  const ctx5 = canvas5.getContext("2d");
  ctx5.font = "20px Arial";
  ctx5.fillText("Canvas Text", 20, 50);
  document.getElementById('fontsize-example5').innerHTML = document.getElementById('fontsize-example5').innerHTML + "<br>" + result5;
</script>

Output:
The output shows the Canvas with “Canvas Text” and below, it shows the same text but with the font size changed using fontsize() method. The <font> tags don’t affect the canvas, but the fontsize tag changes the font of string rendered into HTML.

Note: The fontsize() method manipulates font size through an HTML <font> tag. It will not affect the font size of the text drawn on a <canvas>. To adjust font size on canvas you should use the font property of canvas context (ctx.font). 💡

Browser Support

The fontsize() method has broad browser support across all major browsers. However, given the existence of CSS styling, it’s rarely used in modern web development.

Best Practices

• Avoid direct styling with JavaScript: In modern web development, it is best practice to separate structure (HTML), style (CSS), and behavior (JavaScript). Instead of using methods like fontsize(), use CSS for styling.
• Use CSS for font sizing: Use the font-size property in CSS to control text size. This approach provides greater control and flexibility.
• Dynamic font changes via JavaScript and CSS: If dynamic changes are required, use JavaScript to manipulate CSS classes or inline styles rather than directly using methods like fontsize().

Alternatives

1. CSS font-size property: Use CSS for all your font styling needs:

   .small-text {
     font-size: 12px;
   }
   .large-text {
     font-size: 24px;
   }
   

2. JavaScript DOM manipulation with CSS: To change the font dynamically using JS:
   javascript
const element = document.getElementById('yourElement');
element.classList.add('large-text'); // or remove, toggle etc.
element.style.fontSize = "20px"; // or any value dynamically.


Conclusion

The fontsize() method provides a way to change font sizes using JavaScript but is generally not recommended for use in modern web development. Using CSS and dynamically applying CSS classes or inline styles is the preferred method for styling and controlling text in web applications. This will lead to cleaner code and more maintainable applications. Always aim to keep presentation (CSS) separate from the functionality (JavaScript).