Colors of the Rainbow
Color Properties / Terminology
The Color Wheel
Color Space and Gamut
American Flag Colors -
Experimenting with a Layered Icon Font
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.
|A - Hoist (height) of the flag:||1 unit|
|B - Fly (width) of the flag:||1.9 * height of the flag|
|L - Height of a stripe:||1/13 * height of the flag|
|C - Hoist (height) of the Union:||7/13 * height of the flag|
|D - Fly (width) of the Union:||19/25 * height of the flag|
or 2/5 * width of the flag
|E - Horizontal segments of the Union:||1/10 * height of the Union|
|G - Vertical segments of the Union:||1/12 * width of the Union|
|K - Star diameter:||4/5 * height of a stripe|
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
- 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
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
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;"> </div> </div>
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
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:
|A - Hoist (height) of the flag:||3900|
|B - Fly (width) of the flag:||7410|
|L - Height of a stripe:||300|
|C - Hoist (height) of the Union:||2100|
|D - Fly (width) of the Union:||2964|
|E - Horizontal segment of the Union:||210|
|G - Vertical segment of the Union:||247|
|K - Star diameter:||240|
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
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.
Red: #BB133E, Blue: #002147
Red: #BB133E, Blue: #002664
Red: #BB133E, Blue: #002C77
Red: #B22234, Blue: #3C3B6E
Red converted to: #6B6B6B, Blue converted to: #272727
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.
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.