Images pretty up almost any documentation or guide, so try and use them any time it's possible and applicable. Remember to follow the following guidelines.

Fonts

For any and all screenshots, you must use the default elementary OS font settings. They are as follows:

• Fonts:
  • Application font: Droid Sans, 9pt
  • Document font: Droid Sans, 10pt
  • Desktop font: Droid Sans, 9pt
  • Window title font: Droid Sans Bold, 9pt
  • Fixed width font: Droid Sans Mono, 9pt
• Rendering Details:
  • Resolution: 96 dots per inch
  • Smoothing: Subpixel smoothing (LCDs)
  • Hinting: Slight
  • Subpixel Order: RGB

Theme

When taking screenshots, you must use the elementary theme. This includes the window decorations (Metacity), widgets (GTK), and icons. Typically it is appropriate to use the default elementary OS Jupiter version of the theme (with the "+" maximize button and all window decoration buttons on the left); however, if the screenshot is of something that is in development, it is generally okay to use the newer style.

Background and Framing

If you're working with a screenshot, there are generally two options:

• App-on-the-page look
  • App window appears to be directly on the page
  • Nice shadow (try to match the real window shadow that Compiz creates)
    • 0px x offset
    • 0px y offset
    • 12px spread
    • 35% opaque black
  • Transparent background (or, at the very least, #fafafa)
  • If possible, fit the window on the page at it's original size (full resolution)

• Framed:
  • Screenshot appears more as a snapshot than an app on the page
  • Includes a bit of the wallpaper behind the window
  • Framed by a 4px solid white border
  • Given a black drop shadow at 75% opacity with an 8px spread

The Journal automatically adds the frame and drop shadow to images, unless you give the image a class of "borderless". In wiki-like documentation, simply give the image the class "framed" to give it the same look.

App-on-the-page should be used specifically when showing off an app in its entirety, especially when it's on a guide or documentation specific to that app. Framed should be used when showing screenshots of in-development apps, close-ups of apps, or screenshots of anything that isn't a full app window.

Icons

If using an icon to pretty up the page, you must use an official elementary icon. If you're using an icon in a different size than its native size, first check to make sure there are no closer sizes. Even though SVGs are scalable, different sizes of the same icon are drawn differently with varying amounts of detail.

If an elementary icon does not exist for what you'd like to express, one may be created by an approved designer. Be sure you've checked through all available elementary icons for something that will work before asking a designer to do something custom, as very specific icons often take a very long time to create.