Modules > Typography Basics > Aesthetic Web Typography > Technical Web Typography
Web fonts are based largely on the same principles as fonts in print designs. Fonts on screen share many of the same requirements and concerns as those on the printed page. The goal of web fonts remains the same as in print; that they must communicate to convey a message in design. This can be achieved through sound font choices and good typographic decisions.
While choosing the perfect font or font pairing is a difficult in printed designs, choosing fonts for the web is much more difficult and because issues of resolution display, browser performance, and the availability of typefaces come into play. It therefore becomes much harder to control the look of the final product for screen-based typography.
Designing on a screen using HTML and CSS is different than designing for print since programming languages create websites that are fluid and change across devices and platforms. A designer on a web cannot predict which device or format a viewer will be using to access the text so it is important for fonts and typography to appear consistent from desktops and tablets to phone screens and anywhere else the design might be viewed. The perfect font for a print display might not display well on both a desktop computer and a small mobile screen or may not be available to use on the web at all.
Good typography on the web is about more than just choosing from a multitude of fonts. Elements of color, contrast, grid systems, and hierarchy also work together to create a visually pleasing digital experience for users. Using fonts on the web offers abundant opportunity for interactivity, which makes typographic design for the screen something special. Fortunately, advancements in web standards have made it easier to make use of these elements and create refined typographic systems for the web.
One main reason web typography is different than typography for print is that all content and visual styles need to be specifically coded to appear visually styled in the browser. Typefaces, colors, type styles, weight, and everything from alignment and spacing needs to be defined in a line of code to appear as compelling on-screen as a printed design would.
Essentially, for web typography to be successful, it must follow the same rules as traditional typography by must also adhere to a strict syntax system. Fortunately, this syntax is easy to implement with CSS text properties.
After establishing basic structural elements like grids, columns and spacing, it’s time to add simple typographic tags to your HTML to work with the aesthetics of your typography. Using these HTML tags, it’s easy to control the look of an entire site’s typography by defining their properties in a single CSS document. Typographic HTML tags can be applied to set a standard typeface to a site and implement design principles like hierarchy, color, type size, and contrast.
The following text references some of the most important and commonly used HTML tags and CSS properties for defining a site’s typography. Although this section presupposes a basic familiarity of HTML tags and CSS properties, this guide aims to help you learn to define text and get your on-screen typography looking exactly the way you want.
Here are some typographic HTML tags to help define text within your site:
Use any of the six available heading tags to denote different levels of headings within your site. The first, most important heading on a page should always be marked with an <h1> tag and <h2>, <h3> through <h6>. for subsequent subheads.
The <em> tag is used to indicate portions of text that will be italicized for emphasis. Use this tag to denote the title of a work, movie, song, or strongly emphasized words in a sentence.
The <strong> tag gives words a stronger importance within a block of text and is typically displayed in bold.
Use <p> tags to represent a paragraph of text. Paragraphs can be separated visually by an extra space at the bottom or by first line indents.
Use the <blockquote> tag to represent an extended quotation in a section of text. A blockquote is set apart from text by indentation.
Here are some CSS properties to help style text within your site:
Example: p {font-family: "Helvetica Neue", Arial, sans-serif;}
Use the font-family property to specify a font or list of fonts to use on your site. Fonts should be listed in order of priority with the desired fonts appearing first with a subsequent backup font stack. These CSS font stacks are for browsers that run through the list of names and display the first font they can find on the user’s computer. For example, if a user’s machine doesn’t have Helvetica Neue, then Arial will be substituted and so on.
Example: p {font-weight: normal;}
The font-weight property defines the thickness or thinness of a font’s characters. Fonts can be specified in values such as ‘normal’, ‘bold, and ‘lighter’ or in a range of numeric weights from 100-900. A weight of 400 is the same as normal, and anything above 600 is the same as bold.
Example: p {font-size: 1.5em;}
The font-size property lets you set the size of different font elements within your design. Font size can be specified in pixels, percentages, or ems. By setting a default font size in the <body> element, you can set relative font-sizing everywhere else on the page. Setting the font size in pixels is good if you need pixel accuracy, but pixels are very static. Percentage values are dynamic and scalable and refer to the parent element’s font size. The em value is also dynamic and perhaps the most common way to specify font sizes on the web. By default 1em equals 16px, so 2em would equal 32px and so on.
Example: p {line-height: 150%;}
Use the line-height property to adjust the leading between lines of text. The line-height can be specified by pixels, percentages, or ems. Unlike pixels, percent and em values will scale dynamically and provide a more fluid web design. The default line spacing is 120% of the cap height, so a block of text with line-height of 100% would appear too tight while a block with a 200% line height would appear too loose. However, as the text size gets bigger and line lengths get longer, the line-height needs to grow larger to add more space between lines and maintain legibility.
Example: p {font-style: italic;}
The font-style property represents the tilt, or posture, of letters. This CSS property has four possible values: italic, normal, oblique, and inherit. The ‘normal’ and ‘inherit’ values represent the ‘roman’ or ‘book’ style of typeface, while italic and oblique select a typeface with some degree of tilt.
Example: p {font-variant: small-caps;}
Use the font-variant property to refine typography with small-caps. Small-caps are capital letters whose height matches the x-height of the font. Small-caps can text an elegant and formal look within a paragraph of text and are helpful in creating hierarchy. It has four possible values: normal, small-caps, initial and inherit.
Example: p {font: italic bold 1em/1.5em Georgia, serif;}
Specifying multiple font properties for each text element can get lengthy and repetitive, so the shorthand font property can be a blanket declaration for all font-related properties. The font property can combine multiple lines of CSS font declarations into one rule. The values should be declared in order as follows like the above example: <font-style> <font-weight> <font-variant> <font-size>/<line-height> <font-family>.
Examples: p {color: #FF7F50;}
p {color: coral;}
p {color: rgb(255,127,80);}
The color of a font in CSS can be declared in a number of ways. Specifying a color property with any of the value examples will result in the same shade of coral colored text on the webpage. Specifying #FF7F50 is using the most common method, the hexadecimal color code. Specifying color: coral is calling one of the 140 available color names in CSS3. And calling color: rgb(255,127,80) is using the rgb numerical values to declare the color.
Example: p {letter-spacing: .25em;}
The letter-spacing property lets designers adjust the spaces between characters, similar to tracking in print design, which makes lines of text tighter or looser. Although spaces between individual letters in web design cannot be adjusted (as with kerning), letter-spacing gives the option to track the spacing of entire lines of text. Letter-spacing is especially useful in headings and subheads as it can create emphasis, although it can change the spacing of an entire block of text if needed.
Example: p {word-spacing: 0;}
Use the word-spacing property adjusts the spacing between words in a block of text. Like letter-spacing, this property defines how text blocks are formatted. Word-spacing can be a good way to increase readability and add hierarchy.
Example: p {text-decoration: underline;}
The text-decoration property is useful for making text stand out and is commonly used to indicate links with its underline value. Text-decoration has five possible values: none, underline, overline, line-through and initial.
Example: p {text-transform: uppercase;}
Text-transform controls the capitalization of text within a design. It has the available values of capitalize, uppercase, lowercase and initial. Capitalize transforms the first character of each word to uppercase, while ‘uppercase’ changes all characters to uppercase and lowercase transforms all characters to lowercase lettering. Initial sets text-transform to its default value of regular paragraph capitalization.
Example: p {text-align: left;}
Use the text-align property to specify the horizontal alignment words, paragraphs, and columns on a page. Text-align has four possible values: left, right, center and justify. Left aligned text will be flush on the left but ragged on the right. Right aligned will be the opposite. Center aligned will be horizontally symmetrical and ragged on both edges while justified alignment will be aligned to both right and left edges.
Example: p {text-indent: 5%;}
Text-indent allows the option to add an indent to the first line of a paragraph or column. Text can be indented by a length value in pixels or ems or by a percentage value based on the width of the parent element. The example declaration will indent the first line of each paragraph element by 5%.
Unlike typography for print design, which has hundreds of fonts available to choose from, typography on the web introduces new challenges. For instance, when working on one’s own computer, any font on the machine is available to use to use in a design. This is called a closed system, which is fine to work from when testing or building a webpage. However, when a design is put online, or taken to an open system, the fonts may be compromised as not every machine has access to the same fonts. Because not all fonts are available on all machines, a website may display erratically from device to device, which can alter the design spacing as well as the overall look and feel. This is where web-safe fonts come in handy.
Web-safe fonts, or standard fonts, are a selection of fonts that come pre-installed in operating systems’ software. This small group of about a dozen fonts is common to nearly all computers worldwide. Standard fonts differ between Windows and Mac systems, but a set usually includes 6 serifs, 6 sans serifs, and 2 monospace families along with the generic default serif, sans-serif, monospace, and cursive fonts. These sets are called web-safe, or standard, because they are guaranteed to be viewable on any screen-based design. Although the choices are extremely limited, web-safe fonts are just that: safe to use for all systems. These should be used as part of your font stacks (a list of several similar-looking fonts) as backup in case one or more non-standard fonts fails to load in an open system.
Standard, web-safe fonts on Windows have Mac equivalents designed to fulfill the same look and purpose. These standard fonts and their counterparts have similar set widths and x-heights, as the example below shows.
Custom fonts, or non-standard fonts, are the opposite of web-safe fonts. Custom fonts do not come pre-installed on Mac or Windows systems and are not guaranteed to be viewable on most computers. Non-standard fonts have to be embedded in the site’s code to be viewable to web browsers in an open, online system. There are two main ways of adding custom fonts to your web pages. The first is by using the @font-face method and font-family CSS property to pull the font from your website directory. The second is by using a web font service to embed a url address for the font file. Both methods are covered more in-depth in Module 3 under the Embed with @font-face and Embed with Font Services sections.
Although more effort goes into serving custom fonts over web-safe fonts in a website, designers often prefer to use them to better express their site’s content. Custom fonts provide a much wider range of font choices, which helps designers construct more refined typographic systems and better communicate the design’s message.
So what exactly is a font stack, you may wonder? A font stack is a list of similar-looking fonts the browser reads and then displays the content in whatever font it finds first within the list. Since the users visiting your site need to have the specified fonts installed on their computers in order to be displayed, font stacking is an important technique to control how fonts on your website appear.
The CSS font-family property allows you to specify a list of fonts so if a user doesn’t have your first choice font installed, the browser can try to use an alternative font choice from the list. This means if the first choice is unavailable, the subsequent fonts will be searched in order until one is available on the user’s computer. This fallback method should include several fonts starting with your first choice and ending with a generic web-safe font to ensure your text will appear correctly on any device.
When selecting fallback options for your font stack, it’s important to choose fonts with a similar width and height to they will flow similarly within your design and give you more control over your website’s appearance.
A final font stack might look something like the examples below. Font names with more than one word should be put in double quotes and all are separated by a comma. In these two examples, some users might see Garamond and Helvetica Neue displayed, while others might see Georgia and Arial.
body {
Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;
}
h1 {
font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
}
Unlike font sizing for print media, which are always static measurements, font sizing on the web can be movable, flexible, and can scale within a design. Web typography, therefore, can be more difficult to work with but also more accessible and more adaptable to platforms and devices. Two types of measurements can be used for designers to specify type sizes using the font-size property in CSS. Understanding the basic differences between them is essential to understanding the size units of type themselves.
The first type of measurement for font sizing is the absolute measurement. Absolute measurements have fixed values that cannot be altered. Like printed designs, that can use points, pixels, picas, inches and centimeters, fonts on the web can be sized using absolute measurements of points and pixels. Using absolute points and pixels to size type lets designers have precise control over how typography appears on a page but doesn’t allow for flexibility from one device to another.
Understanding how these units are used in web design is important when writing your code and deciding how to size your typography.
The point unit is a basic unit of measurement equal to 1/72 of an inch, or .35mm. Since point sizes refer to the height of the type block rather than the letter itself, different typefaces of the same size might appear differently, as with the two examples shown below. Both are set at the same point size but differ in their actual height.
Pixel units are also fixed units. One pixel unit of type is equal to one pixel unit on screen. The standard pixel size used on screen is between 14 and 16 pixels for body text because it makes reading faster and easier for the user.
The second type of measurement for sizing fonts is with relative measurements. Relative measurements, unlike absolute measurements, are not fixed units and have no set size. Their size is based on a series of, well, relative measurements linked to the size of the initially set type. Measurement units of percentages and ems are extremely important in modern web design and development since they are compatible with responsive design and can scale uniformly across devices. They also allow users to adjust their browser preferences without breaking the page’s design. Using a relative measurement is considered best practice and is preferred among web developers and designers.
Percentage units of measurement scale uniformly in relation to the element’s default or inherited size. For example, if you use the font-size property to set your type to 100% (about 16px on a default browser), 200% would measure about 32px. Likewise, a size of 75% would be the equivalent of 12px.
Em units are like percentages and scale according to the default element’s size. 1 em is equal to the width of the letter M in whichever font you happen to be using. So if the size of the initial em increases or decreases, the rest of the type sizes will follow. So if a value of 1em is specified in CSS (also about 16px by browser default), 2em would be equal to 32px and .75em would be equal to 12px.
Grids in website design function as organizational tools for managing different kinds of typographic and layout information. A grid is like the skeleton within a page that helps determine its internal divisions and both the position and alignment of typographical elements.
The type of grid you use for your web design depends on the project and the kind of text and imagery you will be using. A grid can be simple or complex, rigid or loose, even symmetrical or asymmetrical. No matter how many or how few columns you choose, the aim remains the same. Your chosen grid system should be formatted to be flexible enough to accommodate a variety of layouts and all devices that may access your website. Therefore, implementing a grid system early on should make the design process easier and streamline your decision-making.
A grid system on the web is made up of standard vertical and horizontal elements: a header at the top, a footer at the bottom, margins between the text and the edge of the page, and columns that are separated by white space called gutters. Whether a page is based on a grid with 6 columns, 10, 12, or 16 columns, an underlying grid system will pull these elements together and help them relate to each other visually.
One especially easy tool for creating an implementing a grid system is Gridpak, a free responsive grid creator, which generates a visual guide to your web pages. Simply select the number of columns and the gutter width and Gridpak will generate PNG, CSS, and JavaScript files for you to temporarily embed in your site to guide your layout. Before starting, consider the approximate width of page margins and sketch some possible layouts and then decide on a workable number of columns based on this.
There are two simple rules when designing a grid system: a grid system should be varied and a grid system should be flexible. First, a grid system should have enough columns so as to allow for variety in a site’s design. The grid shouldn’t be so simple that a design becomes monotonous but should offer enough flexibility to support multiple page templates. Columns on a website can be the same or different widths and variety can lead to some interesting divisions on a page. Generally, the more columns, the more variety a grid can provide to a layout. Columns should also allow enough white space in the margins and gutters to help the user’s eye flow through the content. A well-considered grid system will provide this variety while also helping preserve principles of legibility and readability within your text.
The second rule of designing a grid system is flexibility. The industry standard today is for websites that are responsive and can scale depending on the size and capabilities of the device viewing them. Responsive typography will be discussed more in-depth later on in this module, but one of the key principles to responsive design is using percentage-based layouts. Columns in a flexible-width grid, then, should be programmed in CSS with widths specified in percentages. This allows columns to resize based on the total browser window width.
When working with any kind of typography, two of the paramount factors to consider are legibility and readability. Type exists to serve content, so its primary goal should be to invite the reader to the content and make reading as easy as possible. No matter how beautifully your typography might be laid out on a webpage, if the font or arrangement makes it difficult to read, or if the text looks so daunting the user doesn’t want to read, the design has failed.
The terms legibility and readability are terms often used synonymously. However, they are not one in the same.
Legibility refers to the users’ ability to distinguish one letterform from another. A design’s level of legibility is influenced by the font choices, colors, styles, kerning and tracking. A typeface is legible if it allows for continuous, fluid reading. The user’s eye should glide over the rows of text without becoming stuck on words kerned too tightly or on gaps of space between words tracked too loosely. Text should appear harmonious, letters should have the right amount of vertical and horizontal space, and text should have the right amount of color contrast to allow the reader’s eye to pass over them quickly.
Readability refers to the text design as a whole and the properties that make users not only able to read and understood, but want to read in the first place. Readability is influenced more by the sizing and spacing of copy. Writers and designers often overestimate the amount of time readers are willing to dedicate to reading their text. If a page looks uninviting (text too small, sections too long) a user might just glance over copy or might not bother reading in the first place. Lines that are too long or too close together make scanning difficult and the users’ brains tired. Considering readability and implementing proper sizing and spacing will help pace the content and make copy more inviting.
Good legibility and readability allow users to read easily and comfortably. There are a few general rules to ensure good legibility and readability, and a combination of them will make for a successful typographic design. First and foremost, the font should be easy to read. Decorative or scripted fonts work fine for drop caps and headings, but they are difficult to read at small sizes or in large blocks of text. The physical characteristics of your font should be carefully considered so characters do not blend together or stand out in your body copy.
Second, good legibility and readability require text to be set at a comfortable size with comfortable spacing. Text on screen reads most comfortably when it is between 14 and 16 pixels in size. Users sit further from a computer monitor than a printed page or a phone screen, so text must appear a bit larger to be read comfortably. Lines should have generous leading (generally 2 points more than the text’s point size) and should not be too long or too short. The line length refers to the width of the text column being set. Although there are mathematical methods for determining optimal line length, one simple formula is to select a specific number of characters per line and adjust your type size or column width accordingly. Comfortable line lengths are generally between 50 and 80 characters. They can go larger or smaller depending on the design, but should stay between these general guides.
Another necessary element is the weight of the text and the color contrast between type and its background. The weight of a typeface should strike a good balance between character stroke and the background and the physical color of the text should have a strong tonal difference from the background. Although 100% tonal contrast of black type on a white background might sound ideal for legibility, it can be uncomfortable to read on screen. An easy way to correct this is to make either the text a dark grey or to make the background a slight off-white.
When working with type on the web, adding hierarchy and contrast is one of the most important things you can do visually for your design. Typographic hierarchy and contrast create visual organization, help guide users through the page and show users which text is the most important. Hierarchy is important because it allows users to skim through the information on a page and pick and choose the content they want to read.
Although hierarchy and contrast closely correspond, they are not the same thing. A system of hierarchy is created on a page through the use of contrasting point sizes, weights, fonts and colors of text. The visual differences between these elements become naturally ranked levels within a whole design. Each of these hierarchical levels should be signaled by one or more visual cues that alert users to changes in information being dealt with. While shifts in hierarchy can be obvious or subtle, even the smallest contrast variations can have a big impact.
Pairing typefaces from different font families is probably one of the easiest ways of creating contrast and a sense of hierarchy. Two contrasting fonts will already stand apart from one another and bring attention to different areas of content on a page. It’s generally best to stick with weights from no more than two fonts unless a third is absolutely necessary for additional contrast.
The how and why of pairing fonts is explored more in-depth in Module 1 under Pairing Typefaces.
Point size a another important indicator of hierarchy. Larger text will catch the user’s attention and give importance to the words or lines. Since Headers and subheads tend to be larger than the body copy, they stand out and give the reader easy access to different sections of content. On the other hand, content like captions and legal information tends to be smaller than the body copy. This indicates lesser importance in a block of text. Even a small shift in scale (larger or smaller) can make a big difference to help create contrast and hierarchy in text.
Like with printed designs, the position of text in web design can indicate its importance on the page. Headers and subheads are short descriptions of sections of body text, so they are usually at the top of the page or section so to be read first. Body text, which contains more information but comes secondary to the headings, falls underneath. Position of elements may seem obvious, but it’s important to note since readers’ also read more of the content at the top of a page and may lose interest further down in the page. So, if you have something like a sidebar chart or other piece of information you definitely want users to read, it’s probably a good idea to place it closer to the top of the page.
Weight is another way to create contrast and hierarchy in web typography. Though you may decide to set text with typefaces from different fonts, it’s entirely possible to create the same kind of contrast just within one font family. Many font families have light, bold, condensed or extended weights in addition to the Roman or normal weight. Using any of these variations can help a word or line stand out from the surrounding text. However, using a bold or black weight will feel heavier visually and give that text a stronger presence on the page.
Finally, color is an easy way to create contrast and signal hierarchy on a page. A line of text with a burst of color can at times stand out more in a hierarchy than type that is larger or bolder. A bright color makes text seem loud and will give the appearance of pulling a color forward. On the other hand, a more subtle tone can mute text and push it back in a design. No matter if the physical color of the text is vivid or subtle, it’s important to always keep in mind how it appears on the background. Extra care should be taken to ensure sufficient contrast between text and its background color.
Colors on screen are different than the colors you see in printed works. Unlike printed designs, which are pigment based, (layered primaries cyan, magenta, yellow, and black, or CMYK) colors on screen are made from combining three colors of light: red, green and blue. These colors are called the RGB color model. Computer monitors emit these three colors of light in various combinations to produce thousands of colors on screen. When red, green and blue light waves are mixed together at 100%, the resulting color will be black. If mixed at a 0% value, the color will be white.
Color in web typography does not simply refer to the physical color of the text. Color can refer to one of two things. The first relates to the weight or general proportion of web type. Different typefaces have different relative shades, or tones, of color. Take, for example, an uppercase, bold typeface compared to a roman serif or a thin typeface. The bold text will have a much darker relative color on the page because the letters take up more area on the screen than the lighter typefaces. The serif or the thin typeface, then, would be described as lighter in color. The typefaces might all be black, but their differing densities or tonal weights give them different ‘colors’ on the page.
The second meaning of color refers to the actual, physical color of typography. Thanks to computer screens’ ability to create so many thousands of color variations, web typography can be light or dark, vivid or subtle, or any neon color you can imagine. The one thing to keep in mind when working with color in web design is to make sure your typography stays readable. Whether text is dark on a white background or white on a dark background, the tonal and color differences you choose should be carefully considered to allow users to read content easily.
Although CSS has dozens of generic color names available for specifying type color, the RGB and hexadecimal systems allow much more control and many more options to a typographic design.
RGB color values are specified by listing each color value on a scale from 0 to 255. A bright red, for example, would be specified as rgb(255, 0, 0) after the font color property. The easiest way to choose an RGB value for your typography is to use a color picker tool in Photoshop or Illustrator and select copy the values into your CSS code.
Hexadecimal colors, or hex values, are coded by a set of alphanumeric characters, preceded by a hash mark. These six digits also represent RGB values, but they have been converted into hex equivalents. The same shade of red would be written in CSS like this: #FF0000. In hex color codes, the RGB red value is expressed through a two digit number first, followed by the green value, then blue.
Below is a simple explanation of hexadecimal color values and the same RGB equivalents.
Today, we design for more devices, inputs, and resolutions than ever before. The web had moved from the desktop to countless devices. Tablets, smartphones, even smart watches can all display different sizes and resolutions of webpages. For this reason, it’s incredibly important for designers and developers to practice responsive web design.
Responsive web design is a method of creating websites that scale and adapt depending on the size and capabilities on the device on which they are viewed. Designing a website responsively means to plan and develop webpages that display content differently depending on how the user is viewing the site rather than creating separate stand-alone sites for different devices. Responsive design allows the navigation to change, allows content and design elements reflow and images scale up and down to provide the best experience for users on all devices. Responsive web design allows designers embrace website flexibility without surrendering design control.
So how is responsive design accomplished and how does typography fit in, you ask? A website’s code must have three things for it to become responsive. It must have a flexible, grid-based layout, it must have flexible images and media, and it must use CSS media queries. First, flexible grid systems are designed using percentage measurements rather than static points or pixels. A percentage measurement will be flexible and will allow columns and typography to scale up and down proportionally to the rest of the page. Flexible grids are discussed in more detail earlier on in this module. Likewise, flexible images and media in responsive design use percentage measurements to scale according to the size of the device.
Finally, media queries are the most important element to creating responsive websites. Even a slight resize in a browser’s window size can cause an entire layout to warp or possibly break outright. Media queries, in combination with a flexible grid and images, prevent this from happening. Queries help make layouts and typography responsive by creating incremental breakpoints based on the screen resolution, size or orientation of the user’s browser.
Media queries may seem complicated, but they are really quite simple to implement and use. Media queries are intelligent mechanisms that can identify different types of media as well as the physical characteristics of the devices and browsers that render our content. Let’s take a look at a simple media query.
@media screen and (min-width:768px) {
h1 {
font-size:100%;
}
}
@media screen and (min-width:1024px) {
h1 {
font-size:120%;
}
}
Every media query, including the examples above, has two components. Each query contains a media type a value. In this case, the media type is 'screen' and the values are 'min-width:768px' and 'min-width:1024px'. These widths tell the browser where the CSS styles should kick in. In this instance, the <h1> font size is set at 1.5em for all widths smaller than 1024px. Once the browser width resizes to 1024px, the <h1> font will change to 2em. When the browser is larger than 1024px, this and any additional styles within the media query would be rendered. If the browser is smaller than 1024px or if it fails to match the media type (screen), it will ignore the styles within the query.
Media queries are great for typography on the web because they allow designers to selectively change typographic properties at each break point and correct visual imperfections that occur when the screen size changes. In short, they help us perfect the look of our layouts on all sizes and devices with just a few quick edits.
It’s important to always keep responsive design in mind when designing with type on the web. Consider how your typography will look on devices ranging from the tiniest phone screen to tablets and large LCD monitors. First, remember to denote your type sizes in either em units or percentages so text scale up with the page accordingly. You’ll also have to make adjustments to type sizes and leading depending on the screen size. For instance, you might need to widen the leading on larger screen sizes and tighten it up on smaller ones and you might need to bump up your type sizes on larger screens and scale them down on smaller ones.
Programming languages like HTML and CSS use specific sets of characters to specify the layout and look of a website’s content. Because computers have a tendency to interpret these special characters as parts of the code, errors can occur if the same characters appear in a site’s copy. It’s not uncommon for marks like ampersands and quotation marks (commonly used in HTML and CSS code) to be mistaken by web browsers as code and vice versa.
However, an easy way to get around this character confusion is to use character encoding for special characters. Adding character encoding within your site’s content will ensure the user’s machine interprets the characters as characters and code as code. Character encodings typically start with an ampersand, followed by a hash mark or a number that identifies a specific character.
This simple guide explains the proper way to input apostrophes, quotation marks and other typographic characters and will help keep your code and copy mix-up free.
| Symbol | HTML Number | Name | |
|---|---|---|---|
| & | Ampersand | & | & |
| @ | At symbol | @ | |
| ` | Grave | ` | |
| > | Greater than | > | > |
| < | Less than | < | < |
| – | En dash | – | – |
| — | Em dash | — | — |
| ° | Degree | ° | ° |
| * | Asterisk | * | |
| © | Copyright | © | © |
| ® | Registered copyright | ® | ™ |
| ™ | Trademark | ™ | ™ |
| $ | Dollar | $ | |
| £ | Pound | £ | £ |
| € | Euro | € | € |
| ' | Apostrophe | ' | ' |
| ‘ | Left single quote | ‘ | ‘ |
| ’ | Right single quote | ’ | ’ |
| “ | Left double quote | “ | “ |
| ” | Right double quote | ” | ” |
| " | Double quotation mark | " | " |
| • | Bullet | • | • |
| … | Ellipses | … | … |
| ¹ | Superscript 1 | ¹ | ¹ |
| ² | Superscript 2 | ² | ² |
| ½ | Half fraction | ½ | ½ |
| ¼ | Quarter fraction | ¼ | ¼ |
Drop caps, or initial caps, are a good way to mark the beginning of a page or article to add visual interest to the text. Drop caps add dynamism to copy on a webpage because they stand larger than a single line of text and create a visual starting point distinctive from surrounding paragraphs. It’s generally fine (and even encouraged) to get creative with adding drop caps to your text. Since their function is to attract visual attention, the color, weight, or even font can contrast from the body copy. It’s sometimes beneficial, even, to use a script or decorative letter to start things off.
Drop caps can be used once at the start of a page or throughout the text to provide the user with visual entry points or to mark logical breaks in content. The number of lines a drop cap drops can be altered to create a more dramatic or subtle entry point into the paragraph.
Coding a drop cap is simple and can be done in CSS like the example below.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit.
</p>
p:first-letter {
float: left;
color: blue;
font-size: 3.5em;
padding: 1%;
font-family: Georgia, serif;
}