Lesson 9 Review
In our last class, we learned how to color our websites using Hex Codes (#4C8BF5) and RGBA values (rgba(0,0,255, 0.5)) to control transparency.
Typography plays a massive role in making a website user-friendly and readable. In the early days of the web, HTML provided a specific tag just for this: the <font> tag.
<font> and <basefont> tags are completely deprecated in HTML5. You should NEVER use them in a modern project. However, millions of legacy enterprise websites still use them. We will learn how they work historically, and immediately learn the modern CSS equivalent.
Step 1: Setting Font Size
The legacy <font> tag used the size attribute. Unlike modern web design which measures text in pixels (px) or relative units (rem), the HTML font tag only accepted abstract numbers from 1 (smallest) to 7 (largest). The default size was 3.
The Legacy Code:
<br>
<font size="3">Standard Body Text (Default)</font>
<br>
<font size="7">Massive Headline</font>
Output:
Standard Body Text (Default)
Massive Headline
You could also use Relative Sizes. By putting a + or - in front of the number, you could tell the browser to make the text a few steps larger or smaller than the default. For example: <font size="+2">.
font-size property in CSS to gain pixel-perfect control.<p style="font-size: 24px;">Modern Sized Text</p>
Step 2: Setting Font Face (The Fallback Stack)
The font "Face" refers to the specific typeface family (like Arial, Times New Roman, or Courier). In the old days, we used the face attribute.
The Problem with Fonts: A visitor will ONLY see the font you choose if that specific font file is physically installed on their computer/phone. If they don't have it, the browser panics and loads a boring default font.
To fix this, we provide a Fallback Stack. We list multiple fonts separated by commas. The browser checks for the first one. If it's missing, it tries the second one, and so on.
The Legacy Code:
<font face="Trebuchet MS, Arial, sans-serif">
This is a clean, modern-looking text.
</font>
Output:
font-family property.<p style="font-family: 'Courier New', Courier, monospace;">Hacker Text</p>
Step 3: Setting Font Color
Just like we learned in the Web Colors tutorial, you can use the color attribute inside a font tag, passing either a color name or a Hex Code.
The Legacy Code:
Combining all three attributes at once!
</font>
Output:
Step 4: The Basefont Element
If you wanted your entire website to use "Arial" size "4", typing <font> around every single paragraph would be exhausting. Developers used the <basefont> tag at the top of their document to set a global default.
<basefont face="Arial" size="4" color="#333333">
<basefont> tag is completely dead. Modern browsers do not even recognize it anymore. To set a global default today, you apply CSS directly to the <body> tag. Because of CSS Inheritance, every paragraph and heading inside the body will inherit those rules automatically.Modern Code:
<body style="font-family: Arial; color: #333333;">
Final Quiz: Test Your Engineering Logic
Check your understanding of HTML typography history and modern standards.
Class Dismissed!
You now understand the evolution of web typography. While you know how to read legacy <font> tags, you also know to use modern CSS for all your future development projects.
Keep advancing your Web Development skills!
0 Comments