HTML + CSS step by step (2014)
Chapter 8: Typography
Legacy code. The phrase strikes disgust in the hearts of programmers. It conjures images of slogging through a murky swamp of tangled undergrowth with leaches beneath and stinging flies above. It conjures odors of murk, slime, stagnancy, and offal. Although our first joy of programming may have been intense, the misery of dealing with legacy code is often sufficient to extinguish that flame.”- Michael C. Feathers
In this chapter, you will learn about how to position content, including:
• Floats
• Type of floats
Typography has enabled programmers to embed various fonts in HTML documents and a variety of typefaces are at their disposal, too. Typefaces give the HTML text a certain look and feel. Fonts, on the other hand, allows your computer to access that typeface.
Adding Color To Your Text
When making your HTML document consider the typeface you would like to utilize and the color you want your text to be in. You merely need to use the color property to play around with colors for your text.
html {
color: #555;
}
Font Properties
You can change font properties to edit your web page and to improve its look and feel. You must first declare the font. For this you should use the font-family property. You can use more than one font name but you must separate these with commas. The first declared font that starts from the left is your primary font choice. In case the primary font choice cannot be implemented, the alternative choice will be implemented instead.
body {
font-family: "Courier New", Times New Roman, Arial, Aharoni;
}
In this example, Courier New, is the primary font choice. However, if this cannot be used or if it is unavailable Times New Roman is the next option.
Font Size
This enables you to control and manage the size of the text. You can use em units, pixels, points, font-sizes and percentages to modify the font size.
You can also modify the font style so that certain parts of the text is italicized. You need to use the font-style property for this and there are 4 values that this property will accept:italic,normal,oblique, andinherit.
The italic value will italicize the text while normal will return it to what it was before it was italicized. You must use the special class when changing the font size:
.special {
font-style: italic;
}
You can also change the typeface by making certain parts of the text bold. For this you must use the font-weight property. Five values can be used for this purpose: bold, normal, bolder, inherit and lighter.
. daring {
font-weight: lighter;
}
Programmers utilize the following numeric values to increase the weight of a typeface: 100, 200, 300, 400, 500, 600, 700, 800 and 900. 100 is the lowest and thinnest of all numerical values while 900 is the biggest and so, your text would appear to be very thick if you go for this value.
.daring {
font-weight: 900;
}
Adjust The Line Height
The term “line height” refers to the amount of space between 2 lines. The higher the value, the further apart two lines will be. The lower the value, the closer the two lines will be.
body {
line-height: 24px;
}
Summary
Font sizes can be manipulated to modify or change your text’s look. Various properties are used for this purpose. This chapter teaches you how to do so.
Conclusion
Thank you for downloading and reading this book. There’s a lot more information on how you can use CSS and HTML to make your own web page and I apologize for not including more information on these areas.
However, this book is only meant to guide and familiarize beginners with a few, basic concepts. Once you have familiarized yourself with basic concepts you can go on to more advanced concepts. If you feel that you are ready to look into these you can browse through the various link I have copy/pasted a few links that will benefit you on your journey.