In plain words CSS (Cascading Style Sheets) is a code language that helps to distinguish different styles and looks that set website designs apart. Most commonly written in HTML or XHTML code, expert CSS fluency can lead to dynamic and engaging designs that will stand out and grab viewers, or impress users with expert interface accessibility. Within the code that supplies the description of the look and formatting of a webpage the author can include CSS fonts to add variety, a more personalized look and a more comprehensive typographical design experience that can fit the need and purpose of the webpage in question. Here, we'd like to point out the CSS font properties that can elevate a stylesheet's design.
CSS Font properties define the font-family, boldness, size and style of text. In CSS Fonts, the font family in a given text will be set with a font-family property. These properties are divided in two font-family names: generic family (such as serif, sans-serif, and monospace) and font-family, where specific names of typefaces are submitted (such as Times New Roman, or Arial). Within the syntax write in several font names as "fallback" fonts in case the browser does not support your font choice. Separate these font families with commas.
(Note: there is a CSS3 @fontface rule, which allows for fonts of your chosing that are not necessarily supported by the browser)
Font-style properties most commonly allows you to specify italic font usage. The style supports three values, normal text, italic style and oblique, a leaning text style, less supported by browsers.
Font-size properties sets the size of the text in the stylesheet. The values can be either relative size, which sets font-size relative to surrounding elements in the page and permits users to change the size of the text in their browsers according to their viewing preference; and absolute size, which prevents users from changing the size of the text while viewing the webpage. Why would the absolute size setting be useful when you can imagine it would cause problems with different interfaces, like that of mobile devices? Well, absolute text size is helpful when seeking to control the text size on physical output, in the case of print outs and such.
(Note: Font-size properties should not be used to create headings, for this use traditional HTML tags, like: "< h1 > - < h6 >")
Font-size can be set with pixels, or with Em. The Em size unit is recommended because it allows users to adjust the text size in all browsers. Using pixels for font size gives the web author full control of the font size.
Font-variant: This property will define if the text is desired in small-caps. This means all lowercase letters will be converted to uppercase letters, but kept at the height of the initial lowercase letters. This creates emphasis in text when bold letters are not desired or appropriate. Helps in cases where many text parts need typographical differentiation, like in the case of dictionary entries.
Font-weight specifies how thick or thin typeface characters should be displayed in the stylesheet. This property's values include: Normal (the default setting), Bold, Bolder, Lighter, 100 through 900 (more thickness variety where 400 is normal and 700 is bold), Initial (sets the default weight value) and Inherit (sets weight value according to typefaces' parent element).
Contact us to learn more about how to use free downloaded fonts in your webpage stylesheets, and how CSS syntax can help you achieve the designs you want.
