Chapter 18: The Ultimate CSS3 Typography Tutorial: From Font Size to Font Family and Beyond
Check my mentorship for 1 year at: https://www.itskode.com
Get Ultra Fast Hosting that is Use Personally: https://affiliates.hostarmada.com/scr...
Start Freelancing Here: https://go.fiverr.com/visit/?bta=7910...
Get a Free Website From Us: www.cloudaer.com
You can Work with me:
Fiverr: https://www.fiverr.com/s/jXRKXm
Upwork: https://www.upwork.com/freelancers/~0...
HTML Crash Course: • Unlock HTML5 Mastery: Ultimate 4-Hour Guide
📢 Connect with us:
🌐 Website: www.itskode.com
🐦 Twitter: twitter.com/codingwithkhan
📘 Facebook: facebook.com/codingwithkhan
📷 Instagram: instagram.com/codingwithkhan
🎥 Youtube: / @iamitskode
Typography is the art and technique of arranging text to make it readable, attractive, and expressive. In this video, I will show you how to use CSS3 to style your text with various properties and values. You will learn how to:
Adjust the font size, which determines how large or small your text appears on the screen. You can use different units, such as pixels, em, rem, percentages, or viewport units, to specify the font size. You can also use the font-size-adjust property to preserve the readability of fonts that have different aspect ratios.
Control the font weight, which defines how thick or thin your text looks. You can use predefined keywords, such as normal, bold, or lighter, or numeric values, such as 100, 200, or 900, to set the font weight. You can also use the font-stretch property to adjust the width of your text.
Set the line height, which is the vertical space between each line of text. You can use a number, a length, or a percentage to specify the line height. A higher line height can improve the readability and accessibility of your text.
Modify the letter spacing and word spacing, which are the horizontal spaces between each letter and each word in your text. You can use a length value, such as px, em, or rem, to adjust the letter spacing and word spacing. A positive value will increase the space, while a negative value will decrease it.
Align the text alignment, which determines how your text is positioned horizontally within its container. You can use keywords, such as left, right, center, or justify, to align your text. You can also use the text-align-last property to align the last line of your text differently from the rest.
Add text decoration, which is a line or a style that is applied to your text. You can use keywords, such as underline, overline, line-through, or none, to add or remove a line on your text. You can also use the text-decoration-color, text-decoration-style, and text-decoration-thickness properties to customize the color, style, and thickness of the line.
Change the text transform, which alters the case of your text. You can use keywords, such as uppercase, lowercase, capitalize, or none, to transform your text. You can also use the text-transform: full-width; value to make your text occupy the full width of its container.
Apply a font style, which affects the shape or appearance of your text. You can use keywords, such as normal, italic, or oblique, to set the font style. You can also use the font style: angle; value to specify the angle of slanting for oblique text.
Use a font variant, which modifies specific features of your text. You can use keywords, such as normal, small-caps, all-small-caps, or none, to change the size and shape of lowercase letters. You can also use other font-variant properties to control other aspects of your text, such as ligatures, numeric forms, alternates, and more.
Choose a font family, which is a name or a list of names that specify the typeface of your text. You can use generic names, such as serif, sans-serif, monospace, cursive, or fantasy, or specific names, such as Arial, Times New Roman, or Verdana, to set the font family. You should always provide a fallback font in case your preferred font is not available on the user’s device.
Import a font, which is a way of adding a custom font to your web page. You can use the @font-face rule to define and load a font from an external source. You can also use online services like Google Fonts or Font Squirrel to find and download free fonts for your web page.
By mastering these typography skills in CSS3, you will be able to create stunning and professional-looking websites that impress your visitors and clients. Watch this video now and start learning how to style your text with CSS3! Don’t forget to like and subscribe for more web development tutorials! 😊
