American Flag Colors -
Experimenting with a Layered Icon Font

On this page :: Jump to:
•  Introduction
•  American Flag Dimensions
•  Embedding an Icon Font
•  Building a SVG by Hand
•  Five Point Star Generator
•  Colors Comparison
•  Download and Print
•  Conclusion

If you do research about the colors of the national flag of the United States of America you can come accross inconsistent or vague information. Mostly because of the flag's historic origin and the development of modern technical standards. An early specification states that the cloth colors for the flag are "White", "Old Glory Red" and "Old Glory Blue". For screen and print purposes these colors have to be approximated and different techniques lead to different results.

The wish to visualize the flag with different color sets seemed a perfect excuse to test the practical use of icon fonts. More specifically to test the quality of a layered icon composition – accross browsers and other applications. You can create nice effects by layering or stacking glyphs of suitable fonts. It's a technique more widely supported than SVG images and will probably be replaced with something like the multi-color fonts newly supported in Windows 8.1.

To get started with making an icon font you can read a helpful article at Webdesignerdepot.com which describes a process with free tools. If you are not used to working with Inkscape you can find an introductory tutorial here.

American Flag Dimensions

When you design an icon glyph it's beneficial to choose a width of 1000 units because then the width of the displayed graphic corresponds to the font size in px units. The following table shows the specification of the American flag dimensions which we need to adapt to the width of 1000 units.

[Measures from document DDD-F-416F of March 31st 2005. Download from assistdocs.com for up to date information, or here. Note the information on proportion tolerances. Measure K from Wikipedia.]

This looks rather simple to calculate but how do you round values correctly? Let's say the height of the flag is 500 units. If you round the height of the Union (7/13 * 500) to 269 and the height of a stripe (1/13 * 500) to 38, then the height of the Union doesn't match the height of seven stripes (= 266 units) anymore. Here's a suggestion for a solution:

- Whether you start with a set width or height: calculate and round the stripe height and adapt the flag's height to 13 times the rounded stripe height.
- The height of the Union is 7 times the rounded stripe height.
- Round the width of the Union.
- Round the size of the horizontal and vertical segments and distribute the resulting error on the edges so that the star field is centered on the Union.

Now it should be fairly easy to draw and position the shapes for the flag. The star shape might be an exception. To draw a so called golden five pointed star in Inkscape first choose the star shape from the tools palette. Set the corners setting to 5 and the spoke ratio to 0.382. The spoke ratio is the ratio of the outer radius and the inner radius of the star. To make the star point upwards hold the ctrl-key and position the cursor at the top of the star while drawing the shape. Assign the (white) background shape to the character a, the (red) stripes to the character b, the (blue) Union shape to the character c and the (white) stars to the character d.

Embedding an Icon Font

If you followed the instructions from the article mentioned above you have now an SVG font which you can upload to the Font Squirrel Webfont Generator. This service converts your font into four optimized files (.eot, .ttf, .woff, .svg) which you can upload to your server. It also generates the required @font-face at-rule for your CSS file.

To make the graphic show up on a web page you also have to asign the corresponding font-family to an HTML element, position the characters a, b, c and d on top of each other and color each character separately. The following is an example of how to do this in HTML plus inline CSS. Note that there is an additional space character which is relatively positioned to preserve the required space.

<div style="position: relative; width: 386px; left: 0px; top: 0px; overflow: hidden;">

	<div style="position: absolute; font: 386px flagusaregular; color: #FFFFFF;">
		a
	</div>
	<div style="position: absolute; font: 386px flagusaregular; color: #BB133E;">
		b
	</div>
	<div style="position: absolute; font: 386px flagusaregular; color: #002147;">
		c
	</div>
	<div style="position: absolute; font: 386px flagusaregular; color: #FFFFFF;">
		d
	</div>
	<div style="position: relative; font: 386px flagusaregular; color: transparent;">
		&nbsp;
	</div>
</div>
						

Interim Findings:

1. There's quite some whitespace to the parent element because the font is bigger than the glyph's graphic. The height of the white space differs in Firefox and Chrome.

2. If you make the font quite large (> 1000px) parts of the "characters" disappear in Firefox if you scroll fairly fast up and down the page.

3. The embedded font is not rendered in Internet Explorer.

4. The star shapes are not rendered smoothly in Chrome.

5. The star shapes are not rendered smoothly in MS Word at a size greater than 200pt.

6. The four font files have 10kb together and the SVG file has 40kb.

At this point it seemed reasonable to test whether the outcome would differ by using a commercial font editor.

This helped to solve issue #1 because it became obvious that the required negative space for Firefox and Interent Explorer is: [Win Ascent Height (963 units) - Shape Height (~526 units)] * Glyph Display Ratio (font-size in px / 1000).
The negative space for Chrome is:
[Caps Height (710 units) + 100 - Shape Height (~526 units)] * Glyph Display Ratio (font-size in px / 1000).
Unfortunately the actual values may differ by one or two pixels in all browsers.

Solving issue #2 required a fair amount of trial and error. The solution is to use the correct direction for a shape's path. Counterclockwise!

Issue #3: The font now rendered correctly in Internet Explorer.

To solve issue #4 it was necessary to reorganize the @font-face rule supplied by Font Squirrel. The line specifying the SVG font must be placed right after the line specifying the EOT font.

Issue #5 could not be solved. Looking deeper into Gasp Hinting only improved the outcome a little. Prints are looking great though!

Issue #6 is less an issue than a hard to believe fact. Well, by using the SVG Optimizer the SVG file size could be reduced to 15kb. Not bad, but even that seems a lot for such a simple drawing. Maybe the file size can be further optimized by building a SVG with a text editor.

Building a SVG by Hand

Using a text editor to build a SVG has some advantages:

• You are not restricted to a certain amount of decimal places when needed.
• You can better optimize the structure of the drawing with clever grouping and cloning.
• The file size is most likely smaller than when using a WYSIWYG editor.

One advantage of a SVG drawing is that it doesn't matter what canvas size you choose unless you would design it for one specific size on screen (you can choose how to round values). For the flag drawing this means that we could find a fractionless dimension set if the choosen numbers are big enough. Calculations revealed the smallest possible fractionless dimension set for the american flag:

These values should make it easy to build the American flag as a SVG image. But again, the tricky part is: how to make the stars? A star is not a standard SVG shape. It must be calculated.

Five Point Star Generator

Research about the golden five point star revealed a more accurate value than 0.382 for the ratio of the outer and inner radius of the star. The formula is 1/2 * (3 - Sqrt(5)).
To perform all necessary calculations the following generator has been developed. Simply adjust the values of the form to generate a custom SVG path of a golden five pointed star. For icon fonts select the counterclockwise path direction. For SVGs which are used directly keep the clockwise path direction since Firefox doesn't render the image correctly otherwise.

With this generator it was easy to finish the flag drawing. The final SVG document, including metadata, has a file size of 2.56kb!

Colors Comparison

One source of information about the colors of the American flag is the style guide published by the United States Department of State Identity and Marketing Standards. The company Pantone also has a page about the flag colors with two additional alternatives for blue.

Click on the buttons on the right to compare different configurations.

a

b

c

d

 

Layered icon font graphic with the standard American flag colors.
Red: #BB133E, Blue: #002147

Display of the created SVG image (with the standard colors) instead of the icon font graphic.

a

b

c

d

 

Layered icon font graphic with the first alternative blue color.
Red: #BB133E, Blue: #002664

a

b

c

d

 

Layered icon font graphic with the second alternative blue color.
Red: #BB133E, Blue: #002C77

a

b

c

d

 

Colors currently used in the flag image in Wikipedia articles.
Red: #B22234, Blue: #3C3B6E

a

b

c

d

 

In the official style guide the flag image with "correct" Pantone colors has different RGB colors?? Red: #D12D40, Blue: #002D72

a

b

c

d

 

A grayscale version of the American flag derived from the standard colors.
Red converted to: #6B6B6B, Blue converted to: #272727

a

b

c

d

 

A final free-tools-only layered icon font test. There are quality differences.
Red: #BB133E, Blue: #002147

Check the standard colors and grayscale equivalents with the color converter.

Download and Print American Flag Files

★ Here is a ZIP file with the American flag icon font and a demo HTML page.

★ Here you can view and download the American flag SVG image (license in metadata).

★ Here is PDF with a horizontal and a vertical printable American flag.

Conclusion

It's quite possible to create an icon font with free tools. However, with a commercial font editor you can achieve results of better quality and embedding is more reliable accross browsers.

It's quite possible to create a layered icon font and embed it in web pages. However, SVG images are of a slightly better quality.

The colors comparison tool allows an interesting visual evaluation of different color values for the American flag.