Styling text
Imagine if website texts were simply a markup HTML element with no styling at all, how would that look like? We love when we visit a website and a text is centered, or has a different font-size or color or has background color or image among other styling types. When styling texts, two things are critical that is the Font styles and Text layout styles.
1. Font
a.) Color: This sets the color of the text itself. For example, if you have the paragraph below;
<p> This is my paragraph for color testing </p>
To apply the color property, you will use the below format;
b.) Font Families: To set a different font, you use the font-family property. The browser selects from a list of specified fonts to apply on the text.
i. Web Safe Fonts
These are fonts that are available across different systems. When you purchase an operating system, it comes with a set of fonts accessible on the system, these are the web safe fonts. Below is a list of web safe fonts:
ii. Web Fonts
Get Nelson Muchonji’s stories in your inbox
Join Medium for free to get updates from this writer.
These are usually fonts provided by a third party that download with the website every time a user visits your website. They include Online Font Service e.g Google Fonts and the fonts you generate using third party sites such as Font Squirrel.
c. Font size: To set a font-size, you use units such as pixels, ems and rems. The image below explains more about the different units and when to use them.
2. Text Layout Style
The common property for laying out your text is text-alignment property. Text-align property control how a given text aligns itself within its content box for example a headline (h1). The text-align property takes the values of center, left, justify and right.
Other layout property include;
- Letter and word spacing
- Line height
Let me know if you have any questions about text styling. I have only covered the common text-styling properties.
