Tutorial How to Change Text Color and Font Type in HTML

The choice of color in the text and the type of font that is applied to the HTML document that we create is one of the important things that need to be considered and considered. Where the font is the typeface used in a document.

There are several things that we must pay attention to, such as whether the type of font that is applied is in accordance with the website design, whether the type of font that is applied makes it easier for visitors to read the content on the website, whether the type of font is in accordance with the theme or topic of the website or its content and whether the color of the text applied is appropriate. with a background and does not make it difficult for visitors to read the text and so on.

HTML itself provides elements – elements specifically to regulate the application of fonts and colors in HTML documents. There are many types of fonts that we can use but we also have to remember that the fonts that will be displayed on the web browser come entirely from the user’s computer. It doesn’t matter if the browser used comes from our computer, but if it is opened in a browser on another computer, the web design that has been designed may become chaotic because the type of font applied is not available on that computer.

That’s why standard fonts are used which are generally available on Windows, Linux, Mac OS and others. Standard fonts are generally supported by the majority of web browsers so you don’t have to worry. The following types of standard fonts that you can use:

1. Serif Fonts

Serif fonts are fonts that have a foot on each letter, such as Times New Roman and Georgian. This type of font tends to be rapid and easy to read so it is generally used for paper printing media.

2. Monospaced Fonts

Monospaced fonts are fonts that have the same width as each character, such as Courier, Courier New, and Andale Mono. Because of its nature, this font is generally used to write programs.

3. Sans-Serif Fonts

Sans-serif fonts are fonts that do not have a foot on each letter such as Arial, Verdana, Trebuchet MS, Helvetica, and Calibri. This font is often used as a type of font on the website.

4. Cursive Fonts

A cursive font is a type of font that mimics calligraphy or handwriting like Comic Sans. This font is usually used for the less formal aspects of writing.

5. Fantasy Fonts

Fantasy fonts are visual fonts with special font characters such as matrix fonts, disney and others and are rarely used for page text.

In order for you to better understand the material of text color and font type in HTML, let’s look at the explanation below:

Elements Fonts

With font tags, you can set or change the color and size of a text. You can also use the font elements provided by HTML.

Use of this element is indicated by the tag and ends with the tag . Changing the color and size of the text is done using the attributes that exist in the font elements, namely:

Attribute	Function
Face	Specifies the type of font used on web pages
Color	Indicates the text color used
Size	Specifies the size of a text with a value of 1 to 7

The following is an example of the code for using the font tag in HTML:

   Penggunaan Elemen Font   Claudio Andres Bravo Munoz menandatangani kontrak sebagai kiper FC Barcelona pada musim panas 2021 berasal dari Real Sociedad. Lahir pada 13 April 1983, di kota kecil Viluco de Buin, di daerah Santiago Cile. Ia mulai bermain sepak bola sejak kecil, walaupun awalnya bukanlah sebagai seorang kiper, sebaliknya ia bermain sebagai seorang striker dan kemudian menjadi pemain bertahan.

After the above code is executed in the browser it will look like the image below:

use of font tag in html

In its current use, the tag only supported by HTML 4.01 but not supported or even removed by HTML5. This is due to the use of the tag can be replaced with CSS where CSS functions are superior and efficient than tags .

The following is an example of using CSS in setting fonts in HTML:

   Penggunaan CSS - FONT di HTML    Contoh penggunaan CSS untuk mengatur font style pada suatu teks di HTML
 Contoh Berikutnya Ini

The result will look like the image below:

use of fonts in html and css

After you see the CSS code and the image it displays in the browser, of course you have many questions as to what the function of the font properties in the code above is. Here I give a little explanation one by one (but remember, we still focus on HTML first, not CSS):

A. CSS font size

Font size is used to determine the size of the text characters to be displayed. So, you can apply different font sizes to any text in your HTML document. You can use pixel, em or % units to determine the font size as in the example in the previous code, namely:

#p{ font-size: 20px; }#p1{ font-size: 1em; }

It is highly recommended to use em units instead of pixels where 1em is equal to 16 pixels. But if you are more comfortable using pixels, that’s fine too. In the example #p1 { font-size: 1em; }, the pixel value is 16 pixels because 16 pixels / 16 = 1em.

B. CSS font family

The font family is used to determine the type of font that is applied to the HTML document. For example, look at the example of using the font-family in the previous code, namely:

#p{ font-family:Rockwell, Calibri, Monospace;}#p1{ font-family: Andale Mono;}

In #p, there are three types of fonts namely Rockwell, Calibri and Monospace. Which means that the first type of font that will be applied is Rockwell. But if the Rockwell font type is not available on the user’s computer, the font type that will be applied is Calibri. Then, if it is not available, then apply Monospace which is the standard font.

C. CSS font weight

Font weight is used to print bold letters, here is an example in the code
previously:

#p{ font-weight: bold;}#p1{ font-weight: normal};

D. CSS font style

Font styles are used to create italicized text where you can use 3 values namely normal, italic and oblique. The following is an example of using font styles:

#p{ font-style : oblique;} // Teks ditampilkan berbentuk condong#p1{ font-style : normal;} // Teks ditampilkan biasa tanpa style#p2(font-style : italic;} // Teks ditampilkan dalam huruf miring

E. CSS font variant

The variant font is used to print text in all capital letters. Here’s an example of its use:

#p{ font-variant: normal;} // Teks normal#p1{ font-variant: small-caps ;} // Teks ditampilkan dalam huruf kapital semua

After reading the article above, I hope you can change the color and font type in your HTML document. The next HTML tutorial is on how to create a quote in HTML using the q tag and blockquote.