Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
typography
style

What is the typography.css.file?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Typography is the art of arranging text on a page.

Let’s start by making an​ HTML file and adding the following code to introduce a heading and some text in HTML.

Now, let’s centralize the text a little. We can do that by introducing a new module under <title> named <style> to enforce styling changes in our HTML text. You can see that our main text has a container​class, therefore, we introduce .container to specify some features of text alignment.

Now, lets add a heading (<h1>) and paragraph font (<p>). Here we have three main features:

  • font-size refers to the user-defined size of the text
  • color refers to the color of the text
  • font-family refers to the style of the text

Just as in Microsoft Word, the font styles “Arial,” “Calibri,” “Times,” and “New Roman” all refer to the font-family of a text. In the font-family column for h1, we have given it arial and sans-serif.

Let’s understand what these values mean

Imagine that we ask the web page to use the arial font style for the text. However, the web page does not support this font; so, it will move on to the next font style which, in this case, is sans serif. By default, sans-serif chooses any available font; therefore, it is good practice to write sans-serif at the end when choosing font-family.

Let’s look at some other typographical features. These include:

font weight: bold: This can be used when we need to turn the text of a specific text to bold.

word-spacing: 5px: Sometimes a user may want to increase the space between words.

letter-spacing: 2px: Increase the spacing between the letters.

text-indent: 60px: Introduce indentation at the start of a paragraph.

text-transform: uppercase: This property changes a specific text to upper-case or lower-case.

text-align: center: This property changes the alignment of the text to center, left, or right.

line-height: 2: This property can be used to increase the spacing between lines. The value 2 adds double spacing.

RELATED TAGS

css
html
typography
style
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring