This is the first post in a new series on non-ugly SSRS reports. As I stated in the opening post:

SSRS doesn't have to be ugly

One of the key things I pointed at to the opening post (SSRS - it doesn't have to be ugly) create less-ugly SSRS reports is by getting rid of the Office 2003-style. This is something that's - among other things - signified by the extensive use of Arial fonts, layout via borders, and a certain then-popular color style. Here's what I mean:

Although everything is readable and understandable, here are a few objections I have:

1. I don't like the title styling
2. Arial (and typography in general) is easy-to-read, but somewhat outdated
3. Extensive use of axis titles, aligned in the center
4. Color theme is quite 'hard' - texts are all printed in black
5. Vertical axis is quite obsolete [ref]Some see the bottom axis as obsolete too, but IMHO it gives the columns a common starting point, which I like)[/ref]

All these things aren't necessarily bad things, but they all do have an impact on the experience of a report. Compare this with, say, Power BI, and you'll see some major differences:

So, per objection I've stated above, I'll provide my 'fix', so you can see the impact of the changes for yourself. Pick what you like and leave the rest:

1: I don't like the title styling

Admittedly, this first point isn't a big one. And the fact that I don't like the title styling, isn't that my problem? Why need I bother you with it? Well, let me elaborate a bit why I don't like the title styling: SSRS uses in its charts a different font rendering engine (not the one Windows uses). Below is a text rendered in a SSRS report three times: a Textbox rendered in the webbrowser, a Textbox rendered in Windows Forms (SSDT preview) and text rendered inside an SSRS chart. The differences are mostly subtle, but can sometimes create nasty differences when a text that fitted perfectly in your preview, suddenly becomes too large once deployed to Report Manager or Sharepoint. This is all FYI - you can't do very much about it, but it can help you explain why your report looks different in the browser.

My primary fix is simply to remove the chart title, put it in a separate text box and align it left. The advantages flowing from the use of this separate TextBox are way better than 'just' the rendering:

• Title can be aligned as left as I want it (even before the left border of the chart)
• It gives me the possibility to use placeholders (not available inside a chart title)

2: Arial (and typography in general) is easy-to-read, but somewhat outdated

Much information inside your report is captured inside text. But all this text is showed in Arial, 10pt. Sometimes 8pt. Sometimes bold or 7pt. But still Arial. What about changing that? Some suggestions for other fonts:

• Calibri
• Verdana
• Segoe UI
• Segoe UI Light (Excellent for printing IMHO)

For table structures I tend to pick a somewhat smaller font, but leave the row size the same. This gives more room to display information, while maintaining readability and IMHO even improving design (more whitespace)[ref]Did you know there's a Dutch printing press company use this technique of reducing font size and increasing visual space in their extremely portable 'Dwarsligger' books?[/ref]

On top of that, I tend to move away from borders as a means of laying out my report, and use larger fonts to designate section headers and titles - just like on this blog :). Below are two examples - one in SSRS default, one in my 'altered' style, having removed borders and used newer typography (Calibri in this example, on the bottom of this post is an example using Segoe UI Light which I like more).

As for tables, the difference is even bigger. I'll extensively dive into that in another post, but here's a sneak peek of the difference typography can make for tables once you remove excessive borders and use typographic accents (I also did some formatting to the numbers):

Still not entirely 'it', but it's getting there..

3: Extensive use of axis titles, aligned in the center

Axis titles are sometimes needed, but often they are not. Graphs created by BI tools nowadays more likely put this context into the title or subtitle, making more information accessible in one place, thus removing the need for the reader's eyes to 'jump' from place to place in any chart.

More often than not you won't need your axis title. Let's just ditch the axis titles and gaze at the amount of screen estate returned to our greedy hands (but more importantly, the amount of clutter we lose). And while we're at it, let's also fix the number formatting so it's really displayed in € * 1.000.

Color theme is quite 'hard' - texts are all printed in black

.. And that's a shame. Of course, important texts should be printed in dark colors (more on that later in my 'tables' post), but especially context shouldn't attract that much attention. Let's fix that, and take some grey values - preferably from your customer's style sheet. Think about the importance of the information, and the visual weight you want to attach to it. Rank the following items - what is the most important thing? What next?

• Numbers
• Categories
• Horizontal axis
• Vertical axis
• Gridlines

According to me, the numbers and categories share a first place in the context-data for a chart, and thus need the most visual weight. In this case, I would opt for using just color - not black, but a dark grey like #666666. On a second place follows the horizontal axis, because it's the common ground for all columns. Something like #888888, 1.5pt. After that, the gridlines in, say, Gainsboro. The vertical axis is obsolete, so this can be removed entirely, but I'll leave that to the final step. Also, remove the tick marks (or even better, leave them visible, but give them a LineStyle of 'none' - this leaves more room between your labels and the axis).

While you're busy styling colors, take a look at the columns too. Of course, best is here to use a company style sheet for all colors - grey as well as the more colorful ones. If you don't have any customer or are just preparing a quick demo, use some free tool like Adobe Kuler to pick a nice and modern color scheme via a Custom Palette.

Vertical axis is quite obsolete

As a final point, remove the final axis. This is something to discuss later on in my post about charts, but because we're doing layout mainly via typography and avoid borders unless really needed, let's take on this last one too:

What have we accomplished?

Ok, to summarize our efforts of above, we did the following things in order to make SSRS look better:

1. Moved out the Chart Title
2. Changed the fonts AND font sizes, using typography and spacing for structure instead of lines & borders
3. Removed obsolete items (in this case: chart axis titles)
4. Changed the color theme of text and borders, removed more clutter (in this case: grid lines)
5. Removed the vertical axis

Just repeating these steps won't give you the best result automatically - as an example, here's another design choice that differs only by the font face and size (Segoe UI Light instead of Calibri).

Series: SSRS non-ugly

1. SSRS non-ugly #1: Use of Typography and fonts
2. SSRS non-ugly #2: Formatting Tables
3. SSRS non-ugly #3: Chart Styles
4. SSRS non-ugly #4: Think about Layout
5. SSRS non-ugly #5: The Nitty Griddy Details
6. SSRS non-ugly #6: Hard Work Pays Off: Aligning Matrices