Essay Font Family Cursive

Lesson 2: Applying Typography in CSS

Overview

In this lesson you will learn some of the specific CSS properties that are used to define typography on web pages, and will apply these properties to your portfolio website. You will also learn some strategies for selecting a font family.

Learner Outcomes

At the completion of this exercise:

  • you will be able to identify whether a font is serif, sans-serif, or another font family.
  • you will be able to make informed decisions about which font families to use on a website, based in part on the likelihood that these fonts will be installed on users' computers.
  • you will be able to define the typography of your site by setting the font-family, font-size, font-weight, line-height, text-align, and letter-spacing properties in CSS.

Font Families: Serif, Sans-serif, and others

In CSS (and in typography in general) there are five basic types, or families, of fonts: serif, sans serif, cursive, fantasy, and monospace. There are examples of each of these font families on the W3C CSS Fonts page.

Serif fonts have small lines or strokes that extend from the ends of characters. They can look like small feet, caps, tails, flags or dots. Serif fonts have been used for centuries in printed books, magazines and newspapers.

Sans-serif fonts do not have serifs ("sans" is French for "without"). These fonts are simple and straightforward.

There has been extensive research on which of these font families, serif or sans-serif, is easier to read. Unfortunately, results are inclusive. There are dozens of studies favoring both font families. The bottom line: There are many variables affecting readability of text, not just font family alone. For the body of a web page, it's important to choose a font that is not too cluttered and that flows gracefully from letter to letter without too much space between letters. Generally the best choice for attaining this uncluttered, flowing, easy-to-read look is sans-serif. However, it's possible to attain this look with certain serif fonts as well.

For page titles, headings and sub-headings, a serif font is sometimes a better choice, because they can be perceived as more stately and grand, which helps to contribute to how readers perceive the hierarchy of the page.

What about cursive, fantasy, and monospace?

These fonts are more difficult to read and should be used sparingly. Depending on the message or feeling you're trying to communicate, they might be suitable for short sections of text, such as headings or subheadings.

Common Typographic Properties in CSS

Typography on the Web involves the interplay between various properties in CSS. Here are a few of the most common:

font-family

This property specifies the font of an element. The value of font-family is a list of preferred fonts, separated by a comma, as in these example:

body { font-family: Verdana, Arial, sans-serif; } h1 { font-family: "Times New Roman", Times, serif; }

If the user has the first font in the list installed on their computer, their browser will display that font. If they don't, the browser will try to display the next font in the list. The last font in the list should always be one of the five generic font families, described above. Again, they are:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

This is the fallback font, to be used if none of the preferred fonts are available.

Note that in the above example, "Times New Roman" appears in quotation marks, whereas the other fonts don't. Anytime a font's name is more than one word, it must be in quotation marks.

font-size

This property specifies the size of the font. This can be expressed in relative units like % or em, or in absolute units like px (see the earlier lesson Anatomy of a Style if you need a refresher on these units).

Font size can also be expressed using terms like small, medium, large, larger, x-large, and xx-large.

font-style

This property specifies the style of a font, either normal, italic, or oblique.

font-weight

This property specifies the weight, or thickness, of characters. It can be normal, lighter, bold, or bolder. It can also be expressed as a numeric value between 100 and 900 (numbers must be divisible by 100).

line-height

This property specifies the height of a line of text. This is typically expressed either as a % or em and must be greater than the height of the font or else the lines of text will be squished together.

For maximum readability, the W3C's Web Content Accessibility Guidelines 2.0 calls for the line-height of blocks of text to be at least 1.5em or 150%

text-align

This property specifies how text is aligned horizontally. This can be either left, right, or center. It could also be justify, which aligns text on both the left and right sides of the page like a printed publication. However, this tends to result in awkward spaces between words and should be avoided on the web.

letter-spacing

This property enables you to specify an amount of space between letters. It can be expressed using the same units as other properties, such as font-size. It is sometimes used to give a distinctive look to certain elements such as headings.

text-shadow

This property is new in CSS3. Consequently it isn't supported by all browsers, but if you have a relatively current browser, this property can attach a shadow to text. If done well and used sparingly, this can be have a nice effect for content such as headings. For more information, consult the CSS3 Text-shadow Property page at W3Schools.com.

Activities

  1. Read the article 16 best loved Font Bits in Web Design by Vivian of Inspiration Bit. Select two fonts that you think would look nice for the body of your portfolio website. Since this will effect most of the text on your website, be sure to select fonts that you think will be easy to read. Now select two fonts that you think would look nice for the headings on your portfolio website. Keep in mind who your audience is (who might ultimately read your portfolio?) and choose fonts that reflect the message and style you want to communicate to that audience. For both sets of fonts, choose fonts that are similar to one another.
  2. On a sheet of paper, draw two data tables with four columns and five rows each. Label the first table Preferred Body Fonts and the second table Preferred Heading Fonts. Across the top, add the following column headers to the top of the second, third, and fourth columns: Windows, Mac, and Linux. Number each row of the table 1-4, starting with the row beneath the header row. When finished, your tables should look something like this:
    My ChoicesWindowsMacLinux
    1.
    2.
    3.
    4.
    My ChoicesWindowsMacLinux
    1.
    2.
    3.
    4.
  3. In the first column of each table, list your two font preferences in order of preference.
  4. The website codestyle.org conducts an ongoing semi-automated survey of which fonts users have installed on their computers. Consult the Windows font survey results, the Mac font survey results, and the Linux font survey results. On each of these results pages, check to see what percent of users have each of the four fonts you selected. Record your results in the data tables you created.
  5. What can you conclude from the survey results for the fonts you selected? Which of your preferred fonts are Windows users most likely to see when they visit your web page? What about Mac users? What about Linux users?
  6. Now consult the Common fonts to all versions of Windows & Mac. This is a list of so-called "browser-safe fonts", fonts that are commonly installed on both Windows and Mac. If either your two preferred sans-serif fonts (for the body) or your two preferred serif fonts (for headings) is not included among the browser safe fonts, chose a browser-safe font and add it to your table as a third option. Choose one that looks similar to your preferred fonts, so users will get a similar experience with your website, even if they don't have your preferred font installed. Note that some fonts are available on both Windows and Mac, but are known by different names. For example, Tahoma (Windows) and Geneva (Mac) are the same font. Therefore, both should be included as the third item in your table.
  7. For your fourth font in each category, write the generic font family name, either serif or sans-serif.
  8. Next, open your web portfolio's external style sheet in your text editor, and its home page in a browser.
  9. Find the style definition for the body tag. Look at the properties that are currently used to define the body style. Add a font-family property, or if there's already one there, modify it by adding the fonts that you listed in your table. List them in order, separated by a comma. If any font name is more than one word, remember to enclose it in quotation marks. For example, assume you selected Century Gothic and Gotham as your two preferred fonts, Verdana as your browser-safe font, and sans-serif as your generic font family. Your font-family property would then look like this:

    font-family: "Century Gothic",Gotham,Verdana,sans-serif;

  10. Save the file and refresh your browser to see what effect the change had on your home page.
  11. Now add a font-family style for H1, H2, and H3 headings. Note: When the same style applies to multiple elements, you can define that using one style definition, as in the following example: h1,h2,h3 { font-family: Warnick,Rockwell,"Times New Roman",serif; }
  12. Save the file and refresh your browser to see what effect the change had on your website's headings.
  13. Now experiment with the other properties listed at the top of this page. Apply them one-at-a-time to various elements and see what effect they have on the page. Try to use these styles to enhance your site's readability. Try to stylize your site using typography and color so that it uses contrast, size, hierarchy, and space effectively. Keep the styles that work, and delete the ones that don't.
  14. Handouts/Online Documents

    All done?

    Show your instructor your results before continuing on to the next module.

    Copyright © 2005-2018 by University of Washington. Permission is granted to use these materials in whole or in part for educational, noncommercial purposes provided the source is acknowledged. This product was created with support from the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and is maintained with support from the National Science Foundation (grant #CNS-0540615). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement.

The CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a at-rule.

It is often convenient to use the shorthand property to set and other font related properties all at once.

You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

The property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. (However, this doesn't work in Internet Explorer 6 or earlier.) When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

Syntax

/* A font family name and a generic family name */ font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif; /* A generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; /* Global values */ font-family: inherit; font-family: initial; font-family: unset;

The property lists one or more font families, separated by commas. Each font family is specified as either a or a value.

The example below lists two font families, the first with a and the second with a :

font-family: Gill Sans Extrabold, sans-serif;

Values

The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
Glyphs have stroke endings that are plain.
E.g. "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
All glyphs have the same fixed width.
E.g. "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.
E.g. "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
E.g. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

Valid family names

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

For example, the following declarations are valid:

font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif;

The following declarations are invalid:

font-family: Goudy Bookletter 1911, sans-serif; font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;

Formal syntax

[<family-name>|<generic-family>]#

where

Examples

Some common font families

.serif { font-family: Times, Times New Roman, Georgia, serif; } .sansserif { font-family: Verdana, Arial, Helvetica, sans-serif; } .monospace { font-family: Lucida Console, Courier, monospace; } .cursive { font-family: cursive; } .fantasy { font-family: fantasy; }
<div class="serif"> This is an example of a serif font. </div> <div class="sansserif"> This is an example of a sans-serif font. </div> <div class="monospace"> This is an example of a monospace font. </div> <div class="cursive"> This is an example of a cursive font. </div> <div class="fantasy"> This is an example of a fantasy font. </div>

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes133.51
56 No

No

4312

No43923
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support11 Yes461 ?
5656 No ?43 Yes24 ?

1. Supported on macOS only.

2. Supported as .

3. Supported since macOS 10.11.

4. Supported since iOS 9.

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportFull support 1Full support YesFull support 1Full support 3Full support 3.5Full support 1Full support 1Full support 1Full support YesFull support 4Full support 6Full support 1 ?

Experimental

Full support 56No support NoNo support No
No support No
Full support 43

NotesAlternate Name

Notes Supported on macOS only.
Alternate Name Uses the non-standard name:
No support NoFull support 43Full support 9

NotesAlternate Name

Full support 9

NotesAlternate Name

Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name:
Full support 56Full support 56No support No ? Full support 43Full support Yes

NotesAlternate Name

Full support Yes

NotesAlternate Name

Notes Supported since iOS 9.
Alternate Name Uses the non-standard name:
?

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Document Tags and Contributors

 Contributors to this page:wbamberg, GiS91, fscholz, JLHwung, HarJIT, PageYe, Jeremie, Jürgen Jeka, mfluehr, jpmedley, erikadoyle, janaagaard75, dio, MexieAndCo, Sebastianz, RustyToms, happysmash27, tillarnold, teoli, Jargnik, cben, Xenon, kscarfone, virenrao07, FredB, Sheppy, Gieron, trevorh, revandy, ethertank, mamasboy714@yahoo.com, pdmdn, brianloveswords, nizyri, gruikya, McGurk, grendel, Mgjbot, BijuGC, DBaron, Dria

 Last updated by:wbamberg,

One thought on “Essay Font Family Cursive

Leave a Reply

Your email address will not be published. Required fields are marked *