CSS Text and Fonts Tutorial for Beginners - Typography

In this CSS text and fonts tutorial for beginners, you will learn about typography for your web pages. We will cover the most common text and fonts settings in CSS and apply them to an HTML example.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Text and Fonts Tutorial for Beginners - Typography

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:47) font-size
(03:09) Typography inheritance
(03:58) Changing text color
(04:23) Commenting out code in HTML and CSS
(05:02) text-decoration
(06:34) text-transform
(07:13) text-align
(08:04) text-indent
(08:46) Other text properties to style
(09:14) line-height
(10:25) letter-spacing
(11:21) word-spacing
(12:10) font-weight
(13:47) font-style
(14:22) generic font families
(16:08) font stacks and fallbacks
(18:41) Websafe fonts
(19:05) External fonts

⚙ Web Dev Tools:

📚 References:

📚 Typography Resources:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about the CSS Typography for beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #text #fonts

[vijaybalaji]

hi there Dave, 6 Months back i spent some around 500$ on web dev course and I felt worse of being not satisfied with them, It seems they want to complete the course without our concern whether we understand these concepts or not, I felt took wrong decision, wasted Time and money on them But here You are A Life

[ahmad-murery]

One more thing about fonts is that some fonts may support multiple character-sets (English, Arabic, symbols... for example) while some others don't, so, for multi-lingual dynamic websites it becomes hard to distinguish where a specific language is used so we can set the proper font properties,

the good thing is that we can use the @font-face css rule to create custom fonts by merging unicode ranges from multiple font files,

Thanks Dave,

[pooyannajafi]

Thanks a lot David, very well-paced and informative.

[shawnlee]

Hi Dave, Thanks for the Clear and Simple example, some of then are new to me~

[webb-developer]

text decoration and transform, decoration, align : done!
font all done
remaining : a lot
☑
important : font in button and form aren't inhereted at 3:09

[prathaps]

Hi Grey, am from INDIA Heartful thanks for this session and all videos. I am learning every sessions. Bigg salute to you my best teacher.

[GabrielSouza-yyrq]

That's very good content, as always. Thank you!

[omkar]

hey sir inside github typography css code is not visible
could you please check once lesson_6

[jctueld]

For comment. we can also use the select the code part we want comment then Press the ctrl +/ .

[hiwayshoes]

Hi Dave, great tutorial as usual! Just a question about Google Fonts, is it preferable to link the font in the HTML or import the font through CSS? I’ve looked through Google Font docs and I can’t seem to find any reason from them one way or the other. Is there some kind of performance value involved? It’s always seemed strange to me, but I’m still learning -ha! Anyhow, thanks for all you do, and you have a great day, too… Cheers 💖!

[kaberanshutisamuel]

On google fonts, why am I not seeing the option to select multiple styles ?

[napoleon]

Hi Dave, can you give the list of extenstions you are using? What is the specific extension that allows for yellow dashed lines to show matching comment tags on 4:36 ?

[mehdizarei]

you are awesome my friend;) keep going

[Valdaur]

This isn't really referencing the topic of this video, but at the start when you used padding on the body with percentages, where is it getting that padding size from? Since the body is the parent element of everything else. Is it just the percentage of the size of the body itself?

[younow]

Please David make videos about reactJS real small projects

[regilearn]

Hi,
thanks for all the support for react /javascript developers,
my request is please do a react video how to use* All the FORM components like radio btn, select box, Checkbox, input, , calendar etc, and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***, bcz it will give the clear idea before moving in to formik or any other libruary, i would appreciate if u can use Mongodb for this.I know u will help on this.

[iznotme]

this is my first time learning CSS and it seems to be too overwhelming to remember everything. does anyone else feel this way?

[matinsasan]

Congratulations on posting a video on freeCodeCamp. I hope that attracts you a lot of viewers to your channel.