🎨 Angular Material Typography: Make Your App Look Fancy!
What is Typography? 🤔
Typography is just a fancy way of saying, “Let’s make text look cool!” It’s all about making words readable, stylish, and visually appealing. Angular Material uses Material Design typography rules to keep things neat and consistent.
👣 Step 1: Start a New Angular Project
Open your terminal (or pretend you’re hacking into a mainframe 💻) and type:
ng new my-ang-type --style=scss --defaults
cd my-ang-type
Boom! You just created a fresh Angular project. 🎉
📦 Step 2: Install Angular Material
We need Angular Material to get those pro-level fonts. Run:
ng add @angular/material
Think of this as adding a fashionable wardrobe for your text. 😎
📝 Step 3: Edit app.component.html
Delete everything inside src/app.component.html. Let’s give it a fresh new look:
<h1>Angular Material Typography</h1> <br><br>
<h2>Jackdaws love my big sphinx of quartz.</h2><br><br>
<h3>The quick brown fox jumps over the lazy dog</h3><br><br>
<h4>The quick brown fox jumps over the lazy dog</h4><br><br>
<h5>The quick brown fox jumps over the lazy dog</h5><br><br>
<router-outlet />
Why these sentences? Because they contain every letter in the English alphabet! 🧐
🔎 Step 4: Pick a Fancy Font
Go to Google Fonts and grab something stylish like:
✔ Roboto (default)
✔ Poppins (for extra elegance ✨)
✔ Coiny (for a fun, playful look 😆)
✔ Karla Tamil Upright (because why not?)
🎨 Step 5: Update styles.css
Now, let’s dress up our app by changing the default font in src/styles.css:
html, body { height: 100%; }
body { margin: 0; font-family: 'Poppins', sans-serif; }
Want a different style? Just swap 'Poppins' with another font name.
🚀 Step 6: Run Your App
Time to check out your Typography masterpiece! Run:
ng serve
Go to http://localhost:4200 and admire your stylish text! ✨
💡 Bonus: Showcasing All HTML5 Tags
Want a cool HTML5 reference page? Ask ChatGPT to:
"Create a sample HTML file to showcase all tags in HTML5"
You may get as below:
<!-- <h1>Angular Material Typography</h1> <br><br>
<h2>Jackdaws love my big sphinx of quartz.</h2><br><br>
<h3>The quick brown fox jumps over the lazy dog</h3><br><br>
<h4>The quick brown fox jumps over the lazy dog</h4><br><br>
<h5>The quick brown fox jumps over the lazy dog</h5><br><br>
<router-outlet /> -->
<!DOCTYPE html>
<html lang="en">
<!-- <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Showcase</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background: #f4f4f4;
}
header, nav, section, article, aside, footer {
padding: 15px;
margin-bottom: 10px;
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; }
progress { width: 100%; }
</style>
</head> -->
<body>
<header>
<h1>Welcome to HTML5 Showcase</h1>
<p>Demonstrating various HTML5 elements in one page!</p>
</header>
<nav>
<ul>
<li><a href="#forms">Forms</a></li>
<li><a href="#multimedia">Multimedia</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#lists">Lists</a></li>
</ul>
</nav>
<section>
<h2>Semantic Elements</h2>
<article>
<h3>Article Section</h3>
<p>This is an example of an article. It can contain multiple paragraphs and sections.</p>
</article>
<aside>
<h3>Aside Section</h3>
<p>Side content like related links, ads, or information.</p>
</aside>
</section>
<section id="forms">
<h2>Forms & Inputs</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob"><br><br>
<label for="color">Favorite Color:</label>
<input type="color" id="color"><br><br>
<label for="range">Range:</label>
<input type="range" id="range" min="1" max="100"><br><br>
<input type="checkbox" id="agree">
<label for="agree">I agree to the terms</label><br><br>
<button type="submit">Submit</button>
</form>
</section>
<section id="multimedia">
<h2>Multimedia Elements</h2>
<h3>Audio</h3>
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h3>Video</h3>
<video width="320" height="240" controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h3>Canvas Drawing</h3>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 150, 80);
</script>
</section>
<section id="tables">
<h2>Tables</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Canada</td>
</tr>
</table>
</section>
<section id="lists">
<h2>Lists</h2>
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<h3>Description List</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</section>
<section>
<h2>Interactive Elements</h2>
<details>
<summary>Click to expand details</summary>
<p>This is additional hidden content.</p>
</details>
<h3>Progress Bar</h3>
<progress value="70" max="100"></progress>
<h3>Meter (Fuel Level)</h3>
<meter value="60" min="0" max="100">60%</meter>
</section>
<footer>
<p>© 2025 HTML5 Showcase. All Rights Reserved.</p>
</footer>
</body>
</html>
Copy the generated HTML file, and paste in to app.component.html file [keeping only body contents] now you have a super reference page for future projects! 🚀
🎉 And That’s It for Basics!
Congratulations! You just leveled up your typography game in Angular Material. Now, your app won’t just function well—it’ll look amazing too! 🏆
Happy Coding! 😃🚀
