HOME > Technical Issues > How Google Chrome’s uneven support for CSS’s “font-family” specification negatively impacts Web typography & information design

 

First Published:  26 September 2014
Revised (substantive):  28 June 2022

^  Head-piece from the first book of nautical charts published in English, The Mariners Mirrour (London, 1588).

Technical Report: Display problems with the Google Chrome browser (version 37)

THE PROBLEM I DOCUMENT here has, thus far, affected only one of my computers — my desktop machine, running under the 64-bit operating system Windows 7 Ultimate, Version 6.1 (Build 7601: Service Pack 1). Google Chrome performs as expected on a large “laptop” computer to which I have access, also running Windows 7, as it does on my ASUS ultrabook (running Windows 8.1). So I have no idea how prevalent the problem is. But, given that

As of July 2014, StatCounter estimates that Google Chrome has a 45% worldwide usage share of web browsers so this estimate indicates it is the most widely used web browser in the world.

(Wikipedia, s.v. Google Chrome, as viewed on 11 September 2014)

the browser’s spotty support for CSS3’s “font-family” property on even just one of my computers is a troubling development.

Google Chrome only recently addressed longstanding display issues of a different kind with the release of version 37:

Chrome’s latest update, version 37, finally adds support for DirectWrite on Windows for improved font rendering, according to the release notes. If you aren’t a font nerd, you only need to know this: DirectWrite is a text layout rendering API that first arrived in Windows Vista, which was released in 2007. Chrome came along a year later, and by 2009, people were already asking why fonts in Chrome on Windows looked so awful.

(Pranav Dixit’s post to Gizmodo.com, “The Latest Version of Chrome Finally Fixes How Fonts Look on Windows,” as viewed on 11 September 2014)

Admittedly, I probably qualify as a font nerd — I actually purchase licenses for the fonts that I use and recommend to clients, some of which are quite expensive; I have an entire filing cabinet devoted to my collection of type specimens, and can easily lose days at a time studying its contents; I have specialist knowledge of 17th-century advances in type-face design, such as Joseph Moxon’s Regulæ Trium Ordinum Literarum Typographicarum (London, 1676), which introduced Dutch proportionality (letter forms “compounded of geometrick figures, and mostly made by rule and compass”) to English “writing masters, painters, carvers, masons, and others that are lovers of curiosity,” as well as John Wilkins’s Arabic-inspired character for his universal language in An Essay towards a Real Character, and a Philosophical Language (London, 1668); and for years, I have successfully installed and managed thousands of fonts on my desktop and laptop computers, even coordinating well with service bureaus and high-end printers back in the day when we were all using Postscript for desktop publishing and I seemed to be the only one in the world of professional design who didn’t use Apple hardware or software.

Nonetheless, it isn’t only font nerds who will suffer the effects of Google Chrome’s lackluster typographic performance. Even with the considerable improvements of version 37, Chrome still lags the competition when displaying type on machines running under the Microsoft Windows operating system, serving up Web pages of uneven quality, that — at best — are still less readable than what the other popular browsers display, and — at worst — interfere with established best practices in information design, as documented below.

Google Chrome’s spotty support for CSS3’s font-family property

There are actually two problems to report:

1. Unlike all other popular browsers, Google Chrome does not reliably display a Web page in the Web-safe fonts specified in CSS with the font-family property, even when those fonts are present and installed the website visitor’s computing device.

2. Rather than using a device’s system-level defaults for generic font families (serif, sans serif, monospace) Chrome makes its own bizarre substitutions, with potentially disastrous consequences for website design and page layouts (impacting everything from vertical alignment to visual cues).

As far as I know, Chrome’s spotty support for CSS3’s font-family property is a new problem introduced with the ver. 37 upgrade. In past iterations, Chrome always displayed Web pages much like Mozilla Firefox (my default browser): yes, the text was degraded, and much harder to read than in a Firefox page view, but Web-safe fonts such as Georgia, Verdana, and Trebuchet MS — all of which are installed on all of my computers — always displayed as requested.

Moreover, not all Windows-based computers are affected. On my newer ASUS Zenbook (running Windows 8.1), Google Chrome (version 37) performs as expected. Only on my desktop, running (64-bit) Windows 7 Professional (also known as Windows 7 Ultimate), does Chrome override font-family declarations, ignoring the prioritized list of font family names for a Web page called out in CSS, and skipping directly to a generic font family, arbitrarily set by the Chrome browser.

For those of us who do not wish to sign up for and manage our Chrome browser settings through the Google Cloud, font defaults are accessed by drilling down through a series of dialog boxes (SETTINGS > SHOW ADVANCED SETTINGS > CUSTOMIZE FONTS) hidden behind Chrome’s “minimalistic user interface.” Rather than cluttering up the screen with layers of menus, the minimalist look hides Chrome’s settings & controls behind the simple Chrome menu symbol, (see upper right-hand corner of your browser window).

Clicking/tapping here causes a drop-down menu to appear,

from which one must click/tap on Settings in order to bring up the configuration page for Chrome. After this, one must click/tap on Show advanced settings... and then the Customize fonts... button (in the Web content section towards the bottom of the page) in order to bring up the Fonts and encoding configuration page and find out what defaults are in place for generic font families.

For my desktop and ultrabook computers, the generic font-family settings are:

^  Default font settings (“Fonts and encoding” configuration page) for my desktop computer’s Google Chrome browser (Version 37.0.2062.120 m)
     Here we see that Chrome has assigned Times New Roman for the Standard font and generic Serif font families, as is commonplace; has nominally assigned Arial for the generic Sans-serif font family, but is displaying instead (in the example to the right) Arial Black, which font it will also use to display all sans-serif text on my website pages; and has nominally assigned Consolas (my favorite monospace font, which I have set as the default for my text editor) for the generic Fixed-width font family, but is displaying instead (in the example to the right) Times New Roman, which is not even a fixed-width (also known as monospace) font.

^  Default font settings (“Fonts and encoding” configuration page) for my laptop (ASUS Zenbook) computer’s Google Chrome browser (Version 37.0.2062.120 m)
     Here we see that Chrome has made the same nominal assignments as before: Times New Roman for the Standard font and generic Serif font families; Arial for the generic Sans-serif font family; and Consolas for the generic Fixed-width font family. The primary difference is that the nominal fonts are correctly displaying in the font samples to the right of each drop-down box with font family names.

As shown above, Chrome’s nominal settings for generic font families on my desktop computer are, in two cases (i.e., Arial, Consolas), at odds with what the browser is actually displaying (Arial Black, not Arial, for Sans-serif font; Times New Roman at severely reduced size, not Consolas, for Fixed-width font). And it is the sample displayed here in Chrome’s Fonts and encoding menu, rather than the named font families, that Chrome will use to render Web pages.

As expected, the results of such browser-directed typography are awful (see below for four examples).

Some of us who are font nerds have been preoccupied of late debating the pros and cons of “faux bold” type on the Web; for example,

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design. In this article you’ll find ways to avoid putting the browser in this bind.
   You can’t fault the browser for compensating. The text is supposed to be bold or italic, and if there’s no data available the browser has to do something. So bold appears as a smeared version of regular glyphs, and italic appears as regular glyphs pushed over into a slant. What your users see can be better or worse depending on their browser and the fonts you start with. Some browsers, like Firefox, smear their bolds more, making a mess of display type. Other browsers, such as Chrome, smear their bolds very little, so that the distinction between bold and normal can be lost. None of these faux faces come close to what you can get from a real font.

(Alan Stearns, “Say No to Faux Bold,” published 8 May 2012 to the website, A List Apart)

This is mostly a problem with the new embedded fonts (specified in CSS with the @font-face rule).

But we have a lot more to worry about than “faux bolding” when the most popular browser world-wide arbitrarily substitutes the all-too authentic Arial Black for all weights and styles of what are supposed to be “Web-safe fonts.”

A Chrome-initiated black-letter revival means that a new age of totalitarian typography is upon us.

And it ain’t pretty.

A Note on the She-philosopher.com sample images that follow:
   My example screenshots were all taken in September 2014, while this website was undergoing extensive renovation. The Web pages from which the screen captures were made may or may not have been edited since then. If you wish to do your own comparative analyses of browser displays, check the dates of issue and modification (top and bottom of most pages) for each of the She-philosopher.com Web pages sampled here: your samples may not precisely match mine if a Web page has been edited, and this mismatch may have nothing to do with the browser(s) you use to view the page.
   Also, as of the beginning of 2015, I switched from using Verdana to using Corbel (or Carlito, or Calibri) for sans-serif body text. This means that it is no longer possible to generate comparable screenshots of Example 1 of 4, since Verdana is no longer specified as the lead font in the font-family property for body text in the Cascading Style Sheet controlling the layout and design of Example 1 of 4. Example 1 is the only one of the four examples given below to be affected by this change. I continue to use Verdana for navigation, notes, captions, sidebars, and hover-box text — in short, everywhere that requires type which is attractive and readable when set at small sizes, as explained in the companion technical report giving detailed font-metric comparisons for the Web-safe fonts Georgia and Verdana.

 

  Example 1 of 4

My first example documents how 5 different browsers — Google Chrome, Mozilla Firefox (my default browser), Microsoft Internet Explorer (MSIE), Opera, and Apple Safari — displayed the same She-philosopher.com Web page: Part 1 (Editor’s Introduction) of our two-part e-publication, Lib. Cat. No. FLECK1656 (an HTML transcription of Letters XXIII and XXIV from A Relation of Ten Years Travells in Europe, Asia, Affrique, and America, by Richard Flecknoe, describing his trip to Brazil in 1648–50). My sample screenshots were all taken on 11 September 2014.

^  1a. Resized/resampled screenshot of Part 1 to She-philosopher.com’s digital edn. of Richard Flecknoe’s A Relation of Ten Years Travells in Europe, Asia, Affrique, and America (London, c.1656), as rendered by my desktop computer’s Google Chrome browser (Version 37.0.2062.120 m)
     Here we see that Chrome has substituted a modern sans-serif black letter, Arial Black, for all weights and styles of the “Web-safe font” Verdana, and has substituted the weaker Times New Roman for the much more elegant and expressive Georgia (see the dates of issue, and the paragraph of quoted text from Lisa Jardine’s book on the great English architect, Sir Christopher Wren).
     Use of Times New Roman is a substitution I plan for, since most computer devices use some form of Times Roman as the default serif type face. But that doesn’t mean I want the substitution made so easily, when it is supposed to be a last resort. The different x-heights between Georgia and Times New Roman make such font substitutions a real headache for designers. When I set Georgia to display at 100% (as the dates of issue are set to), it looks perfect; but Times New Roman, with its smaller x-height, is less legible at 100%, and marginal at 90% (which is what quotation type is set to).
     Use of Arial Black is not a substitution I would ever allow for body text, under any circumstances. As is evident here, the heavy lettering erases any distinction between weights and styles, resulting in unsightly blobs of black & purple lettering. The eye strains to read even the first paragraph of body text. At least with traditional black letter, individual glyphs introduce visual variety, beauty of form, and are much easier on the eye.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (121KB).

^  1b. Resized/resampled screenshot of Part 1 to She-philosopher.com’s digital edn. of Richard Flecknoe’s A Relation of Ten Years Travells in Europe, Asia, Affrique, and America (London, c.1656), as rendered by my desktop computer’s default browser, Mozilla Firefox (Version 31.0)
     Here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text).
     As a result, more text fits on the screen, and what’s there, is much more legible; visual cues (reliant on variations in weight, style & color of type) now direct the eye around the screen, as intended; the pairing of a delicate, decorative, old-style initial with modern sans-serif body text is not so jarring; and the information hierarchies (cued by variations in type and color) which structure the page are once again apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (68KB).

^  1c. Resized/resampled screenshot of Part 1 to She-philosopher.com’s digital edn. of Richard Flecknoe’s A Relation of Ten Years Travells in Europe, Asia, Affrique, and America (London, c.1656), as rendered by my desktop computer’s Microsoft Internet Explorer (MSIE) browser (Version 10.0.9200.17054)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     Note the subtle variations in typesetting, affecting both vertical and horizontal spacing of the text, which differs from browser to browser. Closely comparing this MSIE display with that of Firefox (Example 1b.), we can see that not only is the text slightly heavier (sharper, crisper) in Firefox’s presentation of the same page, but because of this, slightly less of it displays in the same amount of screen space.
     Even more pronounced variations in typesetting show up in the printouts produced by browsers. Both Firefox and MSIE create print versions of the Editor’s Introduction that run to 12 pages total. However, in MSIE, the full text of the Editor’s Introduction fits on 10 printed pages, while it takes up 11 printed pages in Firefox.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (78KB).

^  1d. Resized/resampled screenshot of Part 1 to She-philosopher.com’s digital edn. of Richard Flecknoe’s A Relation of Ten Years Travells in Europe, Asia, Affrique, and America (London, c.1656), as rendered by my desktop computer’s Opera browser (Version 11.01, Build 1190)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     As with Firefox (Example 1b.), the text is sharper and crisper in Opera’s presentation than it is in MSIE’s (Example 1c.), and there is even more of it displaying in the same amount of screen space (than displays in Firefox or MSIE).
     Opera prints the full text of the Editor’s Introduction (ending with the phrase, “the Paradise of Birds.”) in only 9 pages (vs. 10 pages in MSIE, and 11 pages in Firefox), but there are problems with Opera’s printout (e.g., missing spaces in the text, printing over the footer) which impede readability, and there are even more problems with Opera’s Print Preview function, which garbles much of the text and won’t scroll/page all the way to the end of the file.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (70KB).

^  1e. Resized/resampled screenshot of Part 1 to She-philosopher.com’s digital edn. of Richard Flecknoe’s A Relation of Ten Years Travells in Europe, Asia, Affrique, and America (London, c.1656), as rendered by my desktop computer’s Apple Safari browser (Version Version 5.1.7 [7534.57.2])
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     As with Firefox (Example 1b.) and Opera (Example 1d.), Safari displays sharp, crisp text, but its implementation of vertical spacing is unique among browsers running on Windows machines. Compare, for instance, the amount of vertical spacing around heads, and from the bottom of the decorative initial to the paragraph quoted from Jardine, in Safari’s vs. Firefox’s display of this Web page.
     Like Firefox, Safari prints the full text of the Editor’s Introduction in 11 pages (vs. 10 pages in MSIE [Example 1c.], and only 9 pages in Opera), but Safari has limited Page Setup capabilities (you can’t, for instance, add a footer, or control the content of the header).
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (67KB).

 

  Example 2 of 4

My second example is from the introductory essay on Robert Hooke in the Players section of She-philosopher.com: “The Absent Presence of Robert Hooke” (rev. 1 August 2012). All of my sample screenshots were taken on 11 September 2014.

^  2a. Resized/resampled screenshot excerpted from the introductory essay on Robert Hooke in the Players section of She-philosopher.com, as rendered by my desktop computer’s Google Chrome browser (Version 37.0.2062.120 m)
     Again, Chrome has substituted a modern sans-serif black letter, Arial Black, for all weights and styles of the “Web-safe font” Verdana, and substituted Times New Roman for Georgia (in this case, the pull quote and body text).
     Because the pull quote is set at 180% of normal, Times New Roman renders much better than at regular text sizes, but it lacks the style of Georgia (especially the italic) at display sizes, and would never be my type face of choice. As body text, Times New Roman washes out in Chrome (even version 37), and the overall weakness of the characters make for a splotchy gray color on the screen which is not attractive.
     As above in Example 1a., the indiscriminate use of Arial Black for all sans-serif text on this page destroys visual cues produced by varying weight & style & size & color & background color of text.
     Heavy-handed use of Arial Black makes everything that is set in it look the same, thus shifting the visual emphasis, and giving the greatest visual import to what is often the least significant content in a Web page’s information hierarchy.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (207KB).

^  2b. Resized/resampled screenshot excerpted from the introductory essay on Robert Hooke in the Players section of She-philosopher.com, as rendered by my desktop computer’s default browser, Mozilla Firefox (Version 31.0)
     Here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text).
     Information hierarchies are clearly visible, and enhanced by playing a distinctive, legible serif (Georgia) off against a distinctive, legible sans-serif (Verdana) for maximum contrast.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (117KB).

^  2c. Resized/resampled screenshot excerpted from the introductory essay on Robert Hooke in the Players section of She-philosopher.com, as rendered by my desktop computer’s Microsoft Internet Explorer (MSIE) browser (Version 10.0.9200.17054)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (129KB).

^  2d. Resized/resampled screenshot excerpted from the introductory essay on Robert Hooke in the Players section of She-philosopher.com, as rendered by my desktop computer’s Opera browser (Version 11.01, Build 1190)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (107KB).

^  2e. Resized/resampled screenshot excerpted from the introductory essay on Robert Hooke in the Players section of She-philosopher.com, as rendered by my desktop computer’s Apple Safari browser (Version Version 5.1.7 [7534.57.2])
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (107KB).

 

  Example 3 of 4

My third example is from She-philosopher.com’s Gallery Catalog: Page 1 (rev. 10 September 2014) of the catalog. All of my sample screenshots were taken in September 2014.

^  3a. Resized/resampled screenshot of Page 1 of She-philosopher.com’s Gallery Catalog, as rendered by my desktop computer’s Google Chrome browser (Version 37.0.2062.120 m)
     Another example (see above, Examples 1a. and 2a.) of how Chrome’s substitution of Arial Black for all weights and styles of the “Web-safe font” Verdana, and substitution of Times New Roman for Georgia (in this case, publication dates and body text) ruins information design.
     Here, the chunky black text is much harder to read (even in something as clean and simple as the navigation bar); emphatic use of bold text (e.g., the start of the centered note) is impossible; and whatever aesthetic appeal the layout and type may have introduced has vanished. In particular, the Times New Roman italic (see catalog entry No. 1) leaves much to be desired, and the 2 paragraphs of black body text are overwhelmed by the thumbnail image to the left, and navigation links to the right.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (242KB).

^  3b. Resized/resampled screenshot of Page 1 of She-philosopher.com’s Gallery Catalog, as rendered by my desktop computer’s default browser, Mozilla Firefox (Version 31.0)
     This is the way the catalog page is supposed to display, using the “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text).
     Information hierarchies are clearly visible, and enhanced by playing a distinctive, legible serif (Georgia) off against a distinctive, legible sans-serif (Verdana) for maximum contrast.
     In particular, Georgia Italic (see catalog entry No. 1) is not only as readable as Georgia onscreen, but quite beautiful as well — still a rare combination. Italic type seldom displays well onscreen (especially the faux italics known as “oblique,” where type is just slanted to the right). For a website like She-philosopher.com, which uses a lot of italic type, being able to rely on a “Web-safe” italic specifically designed for the screen makes a real difference.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (170KB).

^  3c. Resized/resampled screenshot of Page 1 of She-philosopher.com’s Gallery Catalog, as rendered by my desktop computer’s Microsoft Internet Explorer (MSIE) browser (Version 10.0.9200.17054)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (183KB).

^  3d. Resized/resampled screenshot of Page 1 of She-philosopher.com’s Gallery Catalog, as rendered by my desktop computer’s Opera browser (Version 11.01, Build 1190)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (189KB).

^  3e. Resized/resampled screenshot of Page 1 of She-philosopher.com’s Gallery Catalog, as rendered by my desktop computer’s Apple Safari browser (Version Version 5.1.7 [7534.57.2])
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (184KB).

 

  Example 4 of 4

My final example is from She-philosopher.com’s Gallery section: “Modern reproductions of the ‘Velasco Map’ — Fite & Freeman, 1926” (original issue, 4 September 2014), Part 2 of a 5-part Gallery Exhibit themed around the so-called “Velasco Map” of 1610, which some scholars have argued is a fake. Again, all of my sample screenshots were taken on 11 September 2014.

^  4a. Resized/resampled screenshot excerpted from Part 2 of She-philosopher.com’s 5-part Gallery Exhibit on modern reproductions of the “Velasco Map,” as rendered by my desktop computer’s Google Chrome browser (Version 37.0.2062.120 m)
     Final example (see above, Examples 1a. and 2a. and 3a.) of how Chrome’s substitution of Arial Black for all weights and styles of the “Web-safe font” Verdana (see the picture caption), and substitution of Times New Roman for Georgia (see body text) affects the readability and aesthetics of Web pages.
     As a display type face, Arial Black was designed to be set at large sizes, making it especially unsuited to the sort of dense picture captions that are everywhere at She-philosopher.com.
     And some of the design features of She-philosopher.com Gallery Exhibits (e.g., the first paragraph of body text, introduced by an historic decorative initial, and set in over-sized type) show up the flaws of Times New Roman for such a setting.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (215KB).

^  4b. Resized/resampled screenshot excerpted from Part 2 of She-philosopher.com’s 5-part Gallery Exhibit on modern reproductions of the “Velasco Map,” as rendered by my desktop computer’s default browser, Mozilla Firefox (Version 31.0)
     This is the way the Gallery Exhibit page is supposed to display, using the “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text).
     Information hierarchies are clearly visible, and enhanced by playing a distinctive, legible serif (Georgia) off against a distinctive, legible sans-serif (Verdana) for maximum contrast.
     Georgia’s letterforms and old-style figures are design elements in themselves, and add visual interest to the body text for She-philosopher.com Gallery Exhibits.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (184KB).

^  4c. Resized/resampled screenshot excerpted from Part 2 of She-philosopher.com’s 5-part Gallery Exhibit on modern reproductions of the “Velasco Map,” as rendered by my desktop computer’s Microsoft Internet Explorer (MSIE) browser (Version 10.0.9200.17054)
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text). As such, visual cues (reliant on variations in size, weight, style & color of type) render as they are supposed to, and the information hierarchies (cued by variations in type & color) which structure the page are readily apparent. This is especially important for She-philosopher.com Gallery Exhibits, some of which have very complex layouts.
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (198KB).

^  4d. Resized/resampled screenshot excerpted from Part 2 of She-philosopher.com’s 5-part Gallery Exhibit on modern reproductions of the “Velasco Map,” as rendered by my desktop computer’s Opera browser (Version 11.01, Build 1190)
     Again, all text is displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text).
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (147KB).

^  4e. Resized/resampled screenshot excerpted from Part 2 of She-philosopher.com’s 5-part Gallery Exhibit on modern reproductions of the “Velasco Map,” as rendered by my desktop computer’s Apple Safari browser (Version Version 5.1.7 [7534.57.2])
     Again, here we see all text displayed in the intended “Web-safe fonts” I have specified in the font-family property of the applied style sheet: Verdana (for sans-serif text) and Georgia (for serif text).
     View the original screengrab, a PNG image at 100%, as captured by my desktop computer (155KB).

 

^  Tail-piece from Book IV of the best-selling quarto, The Mysteryes of Nature and Art (1634), one of the most complete treatises on inventions, waterworks and hydraulic machinery, with additional sections on drawing, painting, recipes, folk remedies, and pyrotechnics, written by the renowned instrument-maker on London’s Tower Hill, John Bate (fl. 1626–1635).
     Although an obscure figure for us now, Bate’s 17th-century influence was considerable. Captain John Smith of Virginia (and the first “Admirall of New England”) recommended the “Gunners’ Scale ... made in Brasse at Tower Hill, with prospective glasses, and many other instruments by Master Bates” in his Seaman’s Grammar (1st edn., An Accidence or the Path-Way to Experience. Necessary for All Young Sea-Men, or those that Are Desirous to Goe to Sea ..., 1626). John Aubrey taught himself to draw and color using Bate’s manual. And the young Isaac Newton also “copied extracts from Bate’s section on drawing, and was probably inspired by his section on waterworks.” (S. A. Walton, ODNB entry for Bate, n. pag.)
     Written “in plaine termes, that in regard of the easinesse thereof it might suit with the meanest capacity,” Bate’s little, yet comprehensive, illustrated English book clearly laid forth the advantages of useful inventions and discoveries for the unlearned reader; “the descriptions of pumps, for instance, are especially valuable.” (L. B. Wright, Middle-Class Culture in Elizabethan England, 596)

go to TOP of page

up a level: She-philosopher.com HOME page