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 viewport (screen).
The animated gif below is taken from an article on the CSS Tricks website that features the widely-used implementation of the fluid typography approach developed by web designer Mike Riethmuller.
Your two work files: base-3.html and base-3.css
To follow this Lesson, open these two files in your text editor:
The web page named base-2.html.
The stylesheet named base-2.css.
Next, follow the steps below:
Use the File | Save As command to save your base-2.html file with this new name:
You can now make changes to this new base-3.html file without affecting the base-2.html file from your previous exercise.
In the <head> of your new base-3.html file, change the title as follows:
<title>Web page with fluid typography</title>
Also in the <head>, change the description as follows:
<metaname="description"content="A sample web page with responsive layout and fluid typography in a linked stylesheet.">
And finally in <head>, change the stylesheet link as follows:
You are now finished making changes to your base-3.html file.
Save the file with the File | Save command. Or press the Ctrl key (Windows) or Command ⌘ key (Apple) and press the s (for Save) key.
Switch to the base-2.css file, and use the File | Save As command to save the file with this new name:
You are now ready to work with your new web page (base-3.html) and stylesheet (base-3.css) files.
Minimum (320px) and maximum (1600px) web page widths
To use fluid typography in your web pages, you need to decide on two values:
Smallest web page width: A common choice is 320px, the width of the screen of the most widely-used small mobile phone, the Apple iPhone 5.
Largest web page width: Popular choices include 1366px (a common width of Windows laptop screens) and 1440px (a common width of Apple laptop screens). We will use a larger value of 1600px.
You will use both the 320px and 1600px values in the so-called fluid typography equation when setting fluid values for the font-size rule in CSS.
Fluid typography: Browser resets
Before continuing, you need to set your chosen value for the maxumum viewport (screen) width in the CSS file. Add the following line to the browser resets section at the top of your CSS file:
Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate.
Click the Check button.
If you see any errors, return to your base-3.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again.
In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.
Validating your stylesheet
To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.
Copy and paste your CSS file into the box named Enter the CSS you would like validated.
Click the Check button.
If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your base-3.css file in your text editor, fix the errors, save the file, and copy the entire file again.
In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.
Uploading your two files to GitHub
After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.
Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories.
On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.
On the next screen displayed, near the centre of the screen, click the Upload files button.
Select or drag-and-drop the two files base-3.html and base-3.css to upload them to your GitHub account.
After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.
Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:
It may take a few minutes for your uploaded files to appear on GitHub.