Skip to main content

Text vs Font – Learn the Difference

What is the difference between a text and a font? Let's find out.

Text​

Text is the characters of a piece of writing.

Text is the predominant content of a software application. For instance, consider this HTML document:

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .tenor-gif-embed {
        border: 7px solid #000000;
      }
    </style>
  </head>

  <body>
    <div
      class="tenor-gif-embed"
      data-postid="18866548"
      data-share-method="host"
      data-aspect-ratio="1"
      data-width="100%"
    >
      <a
        href="https://tenor.com/view/celebration-dancing-students-students-celebrating-chicken-dance-gif-18866548"
        >Celebration Dancing GIF</a
      >from
      <a href="https://tenor.com/search/celebration-gifs">Celebration GIFs</a>
    </div>
    <script
      type="text/javascript"
      async
      src="https://tenor.com/embed.js"
    ></script>
  </body>
</html>

Try it on StackBlitz

The snippet above is an HTML document containing a GIF animation with some CSS and JavaScript code.

However, even though the above application got configured to display only a GIF animated image, the app's content is 100% text.

In other words, "text" is essential in building software applications.

Font​

A font is a specific style used to alter a text's appearance.

In other words, suppose you wish to change your text's look (shape, size, weight, etc.). In such a case, you will style it with the appropriate font.

For instance, to change the weight of a paragraph element, you will apply the CSS font-weight property like so:

p {
  font-weight: bold;
}

Overview​

Texts are written characters, while fonts are the text's styles.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article