The Elements of Office Style


Today's Guest Writer: Howard Cooperstein

Howard
Cooperstein
is a Lead Program Manager in the PowerPoint and OfficeArt
group.

Last week I gave
an overview
of the new Office Themes capability. Thank you for all the great comments.
This week I’d like to show you what’s inside an Office Theme and how that is
expressed in the user interface.

Driven to Abstraction. Each Office
application has unique formatting capabilities tailored to the document type it
creates. Word Text Styles, PowerPoint Slide Masters and Excel Cell Styles
do similar things in very different ways. Office Themes are able to work
across different applications by including design information abstract enough it
can be applied to a variety of formatting situations. The Theme
colors, fonts and graphic effects are like a list of formatting ingredients and
each Quick Style like a recipe.

We didn’t start off with an abstract approach. We tried,
for example, to put specific text styles into Themes but quickly ran into roadblocks.
PowerPoint uses large text, sometimes lightly colored on a dark
background. Word uses smaller, dark text almost always on a white
background. As we looked at each object to be styled we ran into similar
issues. Ultimately we ended up with a model that was simpler and
more compact than we expected. With Office Themes a small amount of
XML goes a long way.

To come up with the Office Theme components we asked graphic
designers to show us how great looking documents are constructed. We
learned the guidelines for type and color usage. They showed us how they
construct cool graphics in Adobe Photoshop. All of this was distilled into the
font, color and effect “scheme” models. We also looked at existing
theme-like features in Publisher and PowerPoint as starting points.

For the user interface of theme-based formatting we had two
challenges. First, we had to account for the user tendency to override
default formatting. Usually users do this because they don’t see good
looking, easy formatting options. We had to strike a balance between
providing “themed” choices and allowing the full freedom users have always had
in Office. Second, we had to fill the galleries with a range of
choices that still followed the same theme. Quick Style choices need to
span individual user tastes as well as the divergent requirements of
presentations, documents and spreadsheets.

So let’s look at the Theme Fonts, Colors and Effects.

Theme Fonts. Document designers told us
using a single font face for a whole document is always a tasteful design
choice. Two fonts is also a great choice when used carefully for contrast.
Our font scheme contains just two font slots. One for Headings. One
for Body Text. They can be the same font or two different ones. Each
application constructs their default text styles using these fonts.
The result is you are creating themed text simply by typing into an Office
document, even an Excel Cell. Word, PowerPoint and Excel all have
Quick Styles galleries on their main ribbon that leverage the font scheme.
In addition the Font Picker has been updated to communicate the current theme
fonts.

Theme Colors. Our new color scheme
model is designed to work with any document. That means it has to handle
both light and dark backgrounds. There are visibility rules built in such
that you can switch colors at any time and all content will remain legible with
all color relationships in tact.

There are twelve color slots. The first four are for
text and backgrounds. Text created with the light colors will always be
legible over the dark colors and vice versa. There are six accent colors
which are always visible over the four potential background colors. The
last two slots, not shown, are reserved for Hyperlinks and Followed Hyperlinks.

The Theme Colors are presented in every color picker along
with a set of tints and shades based on those colors. (Jensen discussed
the new color picker in a
recent
post
.) By selecting colors from this expanded, matched set
the user can make direct formatting choices for individual pieces of content
that will still follow the theme. When the Theme Colors change, the color
picker changes and so does all document content using them.

Theme Effects. This is where real theme
magic happens. In the 2007 Office System, Word, PowerPoint and Excel all
use the OfficeArt 2.0 graphics platform. The new graphics engine can
generate Photoshop-style effects on charts, diagrams, shapes, pictures and in
PowerPoint on tables and text. If you’ve used Photoshop you know it takes
skill and time to make good looking things. We asked our graphic
designers to explain their system for doing that. For a set of related
graphics they specify “stroke,” “tone,” and “depth.” (Translation: line,
fill and shadow/3-D, respectively.) By combining these three
formatting dimensions together you can generate visuals that all match the same
“graphic scheme,” which we call Theme Effects. In every
Office Theme there is an “effect matrix” with three style levels of line, fill
and special effects. Here’s the Office Default effect matrix:

Each theme has a different effect scheme giving it a different
“feel.” One may have a metallic look while another may look like
frosted glass. It’s all in the Matrix, Neo.

All Together Now. When
the Theme Fonts, Colors, and Effects are combined together and presented in a
gallery the results are powerful. A single click of a gallery cell
communicates hundreds of settings carefully worked out by a graphic designer.

Everything you’ve seen above is from a single theme. In
the next post I’ll explain the easy customization UI for themes that let’s you
create a look that’s uniquely yours.

Comments (24)

  1. Troy Hepfner says:

    Very cool.  I like the concept!

    What if you need to use a third font in your document, or something that doesn’t fit into the Office Themes paradigm?  I presume Office 2007 still allows this level of editing, but does it mean that it stops using themes?  If so, what happens to all of the other theme settings you were using (colors and effects) – are they preserved in your document somehow, or do you lose that information?

  2. Style Schmyle says:

    I’ve used styles in Word since Word 5.0 (DOS).  It’s always been very powerful.  

    I like a lot of the new formatting and styles in Office 12.  And I hope that this will finally bring the benefits of styles to the masses.  (Okay, it’s probably enough to hope that at least a few more will "get" it…)

    So I’ve played with the styles already in Office 12 and I would just hope for a higher-level of customization.  Maybe it’s there, but I haven’t run across it yet.  I would LOVE to be able to set a global style (easily) across all Office applications.  

    I think it would helpful to see it in the options dialog of the individual applications.  Some of the applications (Excel, Access) have had default fonts and font sizes for years.  

    It would be great to tell Office, "Here’s my personality.  Here are the colors and fonts I like.  Just always use the theme I like and that will make me really happy."

    Something like that would make every document I create look the way I want it to look automatically, across applications.

    I know with some work I could still make this happen.  But if this was *easy* for everyone to do… Oh, it would be soooo much nicer.

  3. s_tec says:

    I find that I use three fonts in most of my documents. The first two are pair of complmentary fonts used for body text and headings. In a graphic designer’s world, these are the two fonts that would go into the document theme. In addition, I use a monospace font for setting source code. In Word, I can define a paragraph style called "Code" for this purpose, but this solution is limited to a single application. What if I want a third font in my cross-application theme?

  4. Christian says:

    Yeah, it is true that it is a great taste to use only one font.

    There is only one exception: What if I need to use many fonts for symbols (e.g. greek) in a scientific text? It would be great if the font-dialogue would have a LRU list of recent fonts.

    Also I like to format code (also inside the text) with an antiproportional font. A button for such a style (like <code> in HTML) would be great!

  5. jensenh says:

    Christian,

    The font picker still has a recently used fonts section (between the Theme Fonts and All Fonts.)

  6. pli says:

    Jensen,

    So have you (Microsoft) decided to keep the names of the new fonts all starting with ‘C’?

  7. jensenh says:

    pli,

    I don’t think the creators of the fonts plan on changing the names.

  8. loki says:

    What happens when a plot requires more colors than the number (6) of defined accents? Do you derive new colors from the existing? Or is there a predefined set of plot colors to tap into?

    And what about that PowerPoint blog, Howard?

  9. Phylyp says:

    One word: drool.

    The nice trend I see is that you’ve moved from providing just the tools to create great looking documents, to actually pre-packaging them.

    This is good stuff. Really good.

    It will be a nice day when we can say goodbye to dorky looking documents.

  10. Martha Jones says:

    Jensen: Who on the font team has a blog where I can tell them that the names are really, _really_ bad? Nobody but the font team will be able to tell them apart. Do even you remember which is which from memory?

  11. HowardCo says:

    Howard here.  Good comments & questions.  

    Having three (or more) fonts was discussed at length in early design.  The monospaced "code" scenario was by far the most common.  We felt it OK for code text to remain the same monospaced font after a theme change — the code text color can still be themed.

    Regarding formatting "off theme:" You can always choose non-theme fonts and colors and your overrides are preserved, even if you change theme.  You can clear overrides, too, to get back on theme.

    As for setting "global" style, there is UI in the PPT and Word Theme gallery for setting the default for new docs.  In XL you have to make a default starting template with that theme applied.  

    Regarding chart data colors: it’s the #1 reason we created six accent slots. The Chart team analyzed thousands of customer data plots and found six covers the vast majority. The Chart engine derives new colors from the accents to handle cases of more than six.  This very full set of accents turns out to be great for shape, diagram and table styles, too!

  12. First of all, due to a glitch in the system, Howard’s
    article
    about the philosophy behind Themes in…

  13. HowardCo says:

    Loki: on the PPT/OfficeArt blog — hang in there.  Should be able to give you a fresh link soon.

  14. mentas says:

    See my recent projects (http://spaces.msn.com/mentas/), planned and documented using MS Office 2007 🙂

    I’m using MS Office 2007 to document my school works.

    Looks great!

  15. Josh says:

    So on the topic of themes, though somewhat off topic from this specific discussion of themes, Why doesn’t Office 12 automatically conform to the look and feel of the user’s windows theme?  It seems like the point of the windows theme is to provide a consistent, yet customizable appearance to most apps running on the system.  So far I haven’t found a way to get office 12 to actually use the windows theme, and it certainly doesn’t by default.  Does it simply not support using the windows theme, and if so, what is the point in even having theming ability for windows when THE major app suites from MS doesn’t support it?

  16. Howard Cooperstein is a Lead Program Manager in the PowerPoint and OfficeArt group.
    This week’s post…

  17. Today’s post is the first of two parts covering a fairly large and important topic for PowerPoint: applying…

  18. Dating says:

    Howard Cooperstein is a Lead Program Manager in the PowerPoint and OfficeArt group. Last week I gave an overview of the new Office Themes capability. Thank you for all the great comments. This week I’d like to show you what’s inside an Office Theme an

  19. Weddings says:

    Howard Cooperstein is a Lead Program Manager in the PowerPoint and OfficeArt group. Last week I gave an overview of the new Office Themes capability. Thank you for all the great comments. This week I’d like to show you what’s inside an Office Theme an