In the first article of this series, I talked about how many web developers find CSS to be, very complicated and hard to write, and I talked about how amazing it is, and what amazing things we can do using it.
In this guide, I’ll talk about something very important, something every designer, and front-end developer needs to know and be familiar with, which is, of course, the typography.
You have no idea how much the font, font size, and color, can make all the difference, and how many good websites, failed because they didn’t pay much attention to it.
The pillars of CSS
If I had to divide it into separate chapters, it would look something like this:
· Animation (Already covered here: https://medium.com/@BenSassiAladin/css-basics-part-i-animations-d944518f2474)
· Typography (What part II will cover)
· Most used CSS properties
· Backgrounds
·Borders
· Shapes
· Positioning
· Selectors
· Browser support
· Functions
· Units
Typography
CSS has a large number of text properties, and I remember when I started learning them, I had a hard time remembering all the functions. So here’s a list of all the properties and their use.
Font-based properties:
font-family: allows you to choose the font for your text
font-size: allows you to set the size of the font
font-style: allows you to choose the style of the font (normal, italic, oblique)
font-weight: allows you to choose different font weights (normal, bold, bolder, lighter) or with numeric values (100, 200, 300… 900)
font-variant: allows you to set a paragraph to a small-caps font (normal, small-caps)
Text-based properties:
color: allows you to choose the color of the font, you can do so by naming the color (blue, red, orange…) or using the hex code (#0000ff, #ff0000, #ffa500..)
direction: allows you to change the direction of the text to right to left, or left to right (rtl, ltr)
letter-spacing: allows you to choose the distance between letters in the text (2px, 4px, 6px, -2px, -4px…)
line-height: allows you to choose the distance between lines in the text. you can either choose to use numbers that will be multiplied by the font-size, a fixed height in pixels or percentage of the current font-size
text-align: allows you to choose the alignment of the text (left, center, right, justify) text-decoration: allows you to choose the decoration of the text (none, underline, overline, line-through)
text-indent: allows you to choose the indent of every first line in a text with fixed values (10px, 20px, 50px …) or percentage of the width of the parent element (5%, 20%, 30% …)
text-shadow: allows you to add a shadow to your text. this property has multiple values. h-shadow v-shadow blur-radius color (2px 3px 2px #000)
text-transform: allows you to change the form of the text (uppercase, lowercase, capitalize)
unicode-bidi: is used with the ‘direction’ property and allows you to set or return whether the text should be overridden to support multiple languages in the same document (normal, bidi-override)
vertical-align: allows you to set the vertical alignment of the text (baseline, sub, super, top, text-top, middle, bottom, text-bottom) or you can use numeric or percent values.
white-space: allows you to choose how white space in the text is handled (normal, nowrap, pre, pre-line, pre-wrap)
word-spacing: allows you to choose the length of space between words (10px, 20px, 50px …)
Conclusion
Typography is an important part of a website, but sadly most developers ignore it and focus on other aspects. There are a lot of websites and resources online that could further help you become better at choosing fonts, and color combinations.
I hope this article helped you learn even a new property or value.
Top comments (0)