Before we start making changes to the text size in our media queries, first we're going to change the unit we use for text, from pixels to ems. This makes it easier for us to edit text sizes later on and is also a lot better for accessibility. See the Why use ems section ahead for more on why it's a good practice to use ems for text. To change text settings, perform the following steps:
1. We will open up our stylesheet and find the text sizes that are already set for the desktop site. In the Carborelli's stylesheet all of the text styling is in the same place:
/* Main global 'theme', fonts and typographic styles */ body { font-size: 14px; line-height: 1.4em; } /* Headings */ h1 { font-size: 22px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; font-style: italic; } h5{ font-size: 14px; font-style: bold italic; } h6 { font-size: 14px; font-style: italic; }2. It's important to set the
<body>font size in pixels for consistency...