So if you want a bold font weight, you must write: You can choose from normal, bold, bolder, lighter, 100, 200 to 900 and lastly inherit to use italic font style, you must write:įont weight – defines how light or dark the font displays on your webpage. The font-variant – defines whether the font is normal or small-capsĮ.g. to use Italic font style, the programming you must write is: The font-style - defines whether the font is italic, oblique or normalĮ.g. But if you are interested in using your font style to increase the success of your graphic design, by also introducing font-style and font-variant, they can really make a difference to your page: Italic: font: italic small-caps bold 1em/1.5em “Times New Roman”, Time, Serif īy using these basic instructions you are half way to guaranteeing that your web design is viewed the way you want it to be seen.
Small Caps: font: small-caps bold 1em/1.5em “Times New Roman”, Times, Serif Line Height: to add line height, place it after the font size preceded by a slashįont: 1em/1.5em “Times New Roman”, Times, Serif:įont Bold: font: bold 1em/1.5em “Times New Roman”, Times, Serif: To make font property work on most browsers, it needs to be written in the correct order, for example: font: 1em “Times New Roman”, Times, Serif, but there are also other factors to consider, such as line height, bolding, small capitals, italics which can be easily added to the previous programming by making a few alterations to the ordering: Of all these options the font-family and font-size are the minimum styles required for this style of property. The font property is a shorthand property used to set the following styles of fonts: font-style, font-variant, font-weight, font-size, line height and font family. Using CCS, you can experiment with all their great features which are easy to use and will allow you to add additional designs to your page. When choosing your font, it is also important to bear the syntax of the font property in mind. By including these in your list, you can have your favourite fonts, but also know that if a reader does not have the same font as you, your web design will still look good on their browsers. When compiling your list of fonts, include a standard font near the end of your list and a generic font as your last choice. This way you will not be surprised by how your page looks in various situations and you will receive the best possible results from your site.Ĭhanging your text to your favourite font will definitely make your webpage look great on your browser, but if your readers don’t have the same font as you, their computers will adapt to the nearest option in the generic family.
To counteract this problem we recommend you include both a Windows and a MacIntosh font choice in your font listings. If you examine both machines you will see that there are numerous common generic fonts of the same name on each, but these fonts can actually look different when you use them. Most people have either a Windows or a MacIntosh machine at home, so when choosing a font, knowing the most common font families on both these systems will make life a lot easier for you, guaranteeing clear, consistent design. You can essentially affect the way readers interpret the information you are presenting just by the font you use. It is amazing what the right font can do to your product. When designing your web page, it is important to understand how your fonts will affect the layout of your imagery and web design.