How to make a fat text in html javascript

Learn how to make text bold in HTML & JavaScript with an example, from basic styling to applying classes & IDs.

Making Fat Text with JavaScript

Creating a fat text effect can be an effective way to draw attention to certain words or phrases in a webpage. JavaScript allows us to easily achieve this effect using a few lines of code. First, we'll create a function to add a class to a text element. This class will define the styling for the fat text effect.

function makeFatText(element){
    element.classList.add("fat-text");
}

We'll also need to create a style to define the fat text. We'll use the font-weight property to make the text bold and the letter-spacing property to increase the spacing between characters.

.fat-text{
    font-weight: bold;
    letter-spacing: 2px;
}

Now that we have the necessary functions and styles, we can apply the fat text effect to any element we like. For example, to make all <p> elements on the page fat text we could use the following code:

const pElements = document.querySelectorAll("p");

for(let element of pElements){
    makeFatText(element);
}

And that's all there is to it! With just a few lines of code we can easily create an eye-catching fat text effect. This can be a great way to draw attention to important words or phrases on a webpage.