Working with Text

Learning Goals

At the end of this Tutorial, you will be able to:

• Recognise the most commonly used CSS text properties in frontend development:
    - text-size
    - font-family
    - font weight
    - font style
    - text alignment
    - text leadingt
    - text tracking
    - text case
  

About responsive font sizes

As its name suggests, the font size property sets the size of text in headings and paragraphs. In web design, font sizes can be measured in different units.

In TailwindCSS, you can set font sizes using built-in classes such as text-sm, text-lg, text-xl, and so on.

TailwindCSS responsive font size classes

About fluid typography

Fluid typography means that the font sizes of text – headings, paragraphs, bulleted lists, menu items – on a web page ‘scale’ (shrink or expand) smoothly according to the width of the user’s device viewport.

Here are some examples of web pages that did not use fluid typography to scale font sizes correctly for mobile phone screens.

The effect you want to achieve is shown in the animation below.

TailwindCSS font size classes support various viewport widths, allowing you to easily implement fluid typography without writing custom CSS.

Updating your text sizes

Particularly for <h1> and <h2> headings, the font size values you choose will depend on the number of characters in the heading.

Follow these steps. In VS Code:

1. Open page-1.html.
2. Add the font-size style rules as shown below.
3. Save the page-1.html file and view it in your browser.
4. Open page-2.html.
5. Add the font-size style rules as shown below.
6. Save page-2.html and view the web page in your browser.
7. Open page-3.html.
8. Add the font-size style rules as shown below.
9. Save the page-3.html file and web page in your browser.

About font families

The two basic font family values in wenb design are serif and sans-serif.

• Serifs are the small lines or ‘squiggles’ at the ends of letter, numbers and other characters.
• Sans-serif fonts do not have these serifs (‘sans’ is French for ‘without’.)

By default, web browsers all text in a serif font.

With TailwindCSS, the default font family for all text is sans-serif.

For printed documents, such as books, newspapers, magazines and so on...

• Serif fonts are generally used for long paragraphs of text. This is because the serifs help the human eye to recognise whole words rather than sequences of individual letters.
• For headings and short blocks of text, either serif or sans-serif fonts are equally appropriate choices.

In web pages, however, there is no evidence that paragraphs of text are more readable in serif fonts. So you will see fonts of either the serif or sans-serif family used for various elements of web pages.

Updating your font families

Here are the steps. In VS Code:

1. Open page-1.html.
2. Update the h1, h2 and h3 style rules as shown below.
3. Save page-1.html view the web page in your browser.
4. Open page-2.html.
5. Update the h1 and h2 styles as shown below.
6. Save page-2.html view the web page in your browser.
7. Open page-3.html.
8. Add a new body style declaration as shown below.
9. Save page-3.html view the web page in your browser.

About font weights

In TailwindCSS, the two basic font weight values are font-normal and font-bold.

As you learnt in the previous Working with HTML Tutorial, you can make one or a few words in an element bold with the <b> ... </b> tag pair in HTML.

To make an entire heading or text paragraph bold, however, use the font-bold property in TailwindCSS.

By default, web browsers display paragraphs in normal weight and all headings in bold.

With TailwindCSS, however, headings are also displayed in normal weight.

Updating your font weights

In VS Code:

1. Open page-1.html.
2. Update the <h2> and <h3>styles as shown below.
3. Save page-1.html and view web page in your browser.

1. Open page-2.html.
2. Update the <h2> style as shown below.
3. Save page-2.html and view web page in your browser.
1. Open page-3.html.
2. Update the two styles as shown below.
3. Save page-3.html and view web page in your browser.

This ensures that only the <h2> tag inside the <section> containers will be 'targeted' by the style rule. The other <h2> tag inside the <header> containter will be unaffected.

About font styles

In TailwindCSS, the two basic font style values are normal and italic. By default, web browsers display all headings, sub-headings and text paragraphs in the normal font style.

As you learnt in the previous Working with HTML Tutorial, you can make one or a few words in an element italic with the <i> ... </i> tag pair in HTML.

To make an entire heading or text paragraph italic, however, use the italic class. The two examples below are from Lou Levits.

Updating your font styles

Let's use this property for page-3.html. In VS Code:

1. Open page-3.html.
2. Update the header h2 style declaration as shown below.
3. Save page-3.html and view the web page in your browser.

About text alignment

In Microsoft Word or other word processors, you are typically offered four choices for aligning both headings and text paragraphs: Left, Centered, Right and Justified.

Below are examples of the left, center and right values of the text-align property in CSS.

The text-justify value is not recommended because web browsers do not distribute spacing between characters and words proportionally.

Updating your text alignment

Often, you will want to centre-align the <h1> heading at the top of a web page. Here are the steps. In VS Code:

1. Open page-1.html.
2. Update the h1 style declaration as shown below.
3. Save page-1.html and view web page in your browser.
4. Open page-2.html.
5. Update the h1 style declaration as shown below.
6. Save page-2.html and view web page in your browser.

About text leading

In typography, the term leading reffers to the vertical distance between lines of text within a block-level tag. For most web browsers, the default leading is in the range 1.1 to 1.2.

• The lines in headings and sub-headings are typically close together. So you usually will not want to change the leading of your <h1>, <h2> and <h3> tags.
• For <p> paragraphs of text, however, it is a good idea to increase the leading value slightly.

Updating your leading values

In VS Code:

1. Open page-1.html.
2. Update the p style as shown below.
3. Save page-1.html and view web page in your browser.
4. Open page-2.html.
5. Update the h1 style declaration as shown below.
6. Save page-2.html and view web page in your browser.
7. Open page-3.html.
8. Update the p style declaration as shown below.
9. Save page-3.html and view web page in your browser.

About text tracking

In typography, the term tracking refers to the spacing between text characters within a heading, sub-heading or paragraph.

In web pages, reduced or increased letter-spacing is often used in headings for visual effect.

You will commonly see letter spacing effects applied in brand logos to achieve a distinctive appearance. See the examples below.

TailwindCSS provides a number of classes to simplify adding tracking values, such as tracking-tight, tracking-tighter, and tracking-wide.

Updating your tracking values

Follow these steps. In VS Code:

1. Open page-1.html.
2. Update the h1 and h2 style declaration as shown below.
3. Save page-1.html and view the web page in your browser.
4. Open page-2.html.
5. Update the h1 and h2 style declaration as shown below.
6. Save page-2.html file and view the web page in your browser.
7. Open page-3.html.
8. Add a new section h2 style declaration as shown below.
9. Save page-3.html and view the web page in your browser.

About text case

CSS allows you to control the case of text (upper, lower, capitals) in your web page, without actually changing the text in your HTML.

This property can:

• Make text ALL CAPITAL LETTERS
• Make text all lowercase letters
• Capitalize The First Letter Of Each Word.

Updating your text case property

Follow these steps. In VS Code:

1. Open page-2.html.
2. Add a new style rule to the h2 style declaration as shown below.
3. Save page-2.html view the web page in your browser.

Updating your index.html styles

Follow these steps to update the styles for your website's home page:

1. In VS Code, open the index.html file in your main 📁 assets/css folder.
2. Update your styles as shown below:
3. Save the index.html file and view it in your browser.

Your four completed web pages should now look similar to the following:

Uploading your work to GitHub

You are now ready to upload your work to your account on GitHub.

1. Open a new tab in your web browser and go to github.com. If you are not already signed in to your GitHub account, sign in now.
2. On your GitHub home page, click the name of the repository (‘repo’) that holds your web pages. It's name will look as follows, where username is your chosen username on GitHub.   username.github.io
3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
4. From the dropdown list displayed, choose the option Upload files.
5. In File Explorer (Windows) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 assets and 📁 exercises sub-folders to upload them to your repository on GitHub.
6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
7. Finally, click the green Commit changes button to upload your entire exercises sub-folder and all the files it contains.

Your web pages are now published on GitHub at web addresses similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/index.html
Or simply:
https://username.github.io

And:
https://username.github.io/exercises/page-1.html
https://username.github.io/exercises/page-2.html
https://username.github.io/exercises/page-3.html