Coding for Beginners: CSS Basics #79— A Shorthand for Fonts
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
With web typography, there is also a shorthand that allows you to name the values of several font properties all at once.
At a minimum, you must include the font-size and font-family.
But when using the shorthand, you can set the following properties in this order:
font-style
font-variant
font-weight
font-stretch
font-size
line-height
font-family
Each property is separated by a space but for font-size and line-height, add a forward slash in between. For font-family, you can add a font stack using commas.
We did not specifically go over font-variant but it is used to specify the ligatures, proportional or tabular numbers, slashed zeros and small-caps.
Support of font-stretch is relatively new so if it is not recognized by the browser, the whole statement may be ignored. So it is usually best to add a fallback just in case.
#HTML #CSS #coding #web #accessibility #font #fontshorthand #typography #webtypography #websitetypography #fontsize #fontfamily #fontstyle #responsivetypography #webseries #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse