Texts and Fonts Property

CSS text and font properties are helpful to make our webpage much more beautiful. Here I will be explaining you texts and fonts properties in CSS that can be useful at times.

Text Properties

1. Color:

• The color property sets the color of the text content within an HTML element.

• You can specify the color using various formats, such as:

  • Named colors (e.g., red, blue, green)

  • Hexadecimal values (e.g., #FF0000 for red)

  • RGB values (e.g., rgb(255, 0, 0) for red)

  • HSL values (e.g., hsl(0, 100%, 50%) for red)

p {
  color: blue;
}

2. Text Alignment (text-align):

• The text-align property controls the horizontal alignment of text within an element.

• There are four values in this properties, such as:

  left: Aligns text to the left (default).

• right: Aligns text to the right.

• center: Centers text horizontally.

• justify: Adjusts spacing between words to create even right and left margins.

h1 {
  text-align: center;
}

3. Text Decoration:

• Text decoration properties control how text is visually styled with lines or other effects.

• Here are few properties used for decorating text:

1. text-decoration-line:

• Specifies the type of decoration.

• There are four values in this property, such as: none, underline, overline and line-through.

• They can be used in a combination, for example: text-decoration-line: underline overline line-through; .

a {
    text-decoration-line: underline;
}
p {
    text-decoration-line: underline overline;
}

2. text-decoration-color:

• Sets the color of the text decoration lines.

a {
  text-decoration-color: red;
}

3. text-decoration-style:

• Determines the style of the text text decoration lines.

• Most heard values: dotted, solid, dashed and none.

a {
  text-decoration-style: dashed;
}

4. text-decoration-thickness:

• Specifies the thickness of the text decoration lines.

a {
  text-decoration-thickness: 2px;
}

5. text-decoration:

• This is a shorthand for using all four text decoration properties, it combines all four decoration properties into one property.

a {
  text-decoration: underline red dashed;
}

4. Text transform

• The text-transform property modifies the capitalization of the text.

• There are four values in this property, such as:

  none: No capitalization changed (default).

  uppercase: Converts whole text into uppercase.

  lowercase: Converts whole text into lowercase.

  capitalize: Capitalizes the first letter of each word.

.uppercase-text {
  text-transform: uppercase;
}

5. Text indent

• The text-indent property specifies the indentation of the first line of text within an element.

• It is commonly used for creating paragraph indentation.

• It allows you to control how much space is added before the first line of text.

• You can use either fixed lengths such as px, or percentage.

• Negative values are allowed, which will indent the first line to left.

p {
  text-indent: 2em; /* Indent the first line by 2em */
}

6. Letter spacing:

• The letter-spacing property controls horizontal spacing between individual characters in a text.

• Positive values increase the space between characters, while negative values bring them closer together.

• You can specify the spacing using fixed lengths such as px, or unit-less numbers, such as em

h1 {
  letter-spacing: 0.3em; /* Add extra space between letters */
}

7. Line height

• The line-height property sets the height of a line within a block a text.

• It affects the vertical spacing between lines.

• You can use unit-less number, fixed lengths and percentage.

p {
  line-height: 1.5; /* Set line height to 1.5 times the font size */
}

8. Word spacing

• The word-spacing property controls the space between words in a text.

• Positive values increases the space between words, while negative values reduces it.

• You can specify the spacing using fixed lengths.

p {
  word-spacing: 10px; /* Add extra space between words */
}

9. Text shadow

• The text-shadow property adds a shadow effect to text.

• You can specify the horizontal and vertical offsets, blur and color of the shadow.

• Multiple shadows can be applied.

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow to the text */
}

Font properties

1. Font size

• The font-size property sets the size of the text.

• You can specify the values in px, em, rem and vh etc.

p {
  font-size: 16px; /* Set font size to 16 pixels */
}

2. Font weight

• The font-weight property determines how thick or thin the text should appear in display.

• It accepts values such as: normal, bold, bolder, and numeric values from 100 (thinnest) to 900 (thickest).

h1 {
  font-weight: bold; /* Set bold font weight */
}

3. Font family

• The font-family property specifies a prioritized list of font family names or generic family names for the selected element.

• You can include multiple fonts separated by commas.

• Always ends with a generic family such as: serif and sans-serif etc. to ensure if special fonts that we are using are not downloaded in clients browser then to use these default fonts to show our content.

body {
  font-family: <your-font-name>, Arial, sans-serif;
}

4. Font style

• The font-style property sets whether a font should be styled with a normal, italic or oblique face from its font-family.

• It accepts values like normal, italic and oblique.

em {
  font-style: italic; /* Applies italic style */
}

Using these properties in CSS can make the appearance much better, most of these values are not used, but sometimes they can come in handy.

(BONUS) Using fonts from your local directory

1. Download the font that you want to use on your webpage.

2. Create a fonts folder inside your project.

3. Define the font using @font-face in your CSS.

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
}

• Inside the font-family give a custom name that you want the font to be called.

• Inside the src set up your folder location.

4. Use this font anywhere you want.

body {
  font-family: 'MyCustomFont', sans-serif;
}

Sometimes you would want to use your custom font in your website hence this method will always come in handy.