What is it?

Cleaner is a tool that will come in handy in case that you need to achieve consistency on margins, padding, font family, font size and letter spacing among other areas. We know that a clean site is attractive and it will always look better if it is consistent.

Cleaner takes a base value and starts computing in order to normalize your styles, fixing the differences or inconsistencies on the affected areas.

How it Works

Here’s a basic example on how the Cleaner works.

Let’s say that you have an application and the alignment does not look really good because the margins are different. Fixing something like that is fairly easy and fast when you have one or just a few apps. You will only have to open the style dots and verify the settings yourself. Now, let’s say that instead of one app you have twenty, it will take you more time to verify the settings app per app. Well, do not worry, Cleaner will take a look at the settings for you. Cleaner will compare the values, take the minimum one and apply it to the opposite margin. Confused?  Let me give you an example, if the app has 23px as top margin and only 20px as bottom margin, Cleaner will take the minimum value which in this case is 20px bottom and will apply it to the top margin. This is just one of the cases that Cleaner can solve.

You can clean the styles of your site just by clicking on the Cleaner button.

Once you click on the cleaner button you will see a preview of how the site will look after you apply the Cleaner. You can either apply or revert the changes. You will see these options at the top of the page.

You can decide either to apply the Cleaner only to the fonts, only to the margins or both.

Affected areas

We have divided the affected areas into two main categories:

1. Fonts

2. Margins and padding

We will break down these categories as we move forward on this article.

Fonts

In order to cover how fonts get affected by the Cleaner we have to touch specific points, let’s start by consistency.

Property Consistency Check

When we talk about consistency we include font size, family and line height. All of these areas related to H tags within one single block. But how does it really work? well, If the font size, family or line height is different for two or more tags that are equal (let’s say H1), Cleaner will take the first one and make the rest of them the same for all their properties inside that same block. This means that all of the H1 tags  inside that specific block will have the same settings.

Here’s an example of two different H2 tags.

This is how they look before the Cleaner

H2 tags after Cleaner

Huge Font Size Check

This check applies for the Normal text. Normal text should never be bigger that 16px, in case that there’s text formatted as Normal and if it is bigger than that, Cleaner will brig it down to 16px. This normal text will be also know as P or Base Value.

Normal text before Cleaner

Normal text after Cleaner

Proportionality Check

What Cleaner does up to this point is check if you do not have an H tag that is lower on visual hierarchy but at the same time larger than it’s superior. To illustrate this let’s say that If you have an H5 tag that is 65px and an H1 tag that is only 60px big, both tags will be fixed according to our P or Base Value that in this case is 16px then Cleaner will compute the correct size for each tag respecting the following hierarchy P, H1, H2, H3, H4, H5 and h6, this means that P is the smallest value and H1 the biggest.

Line Height

Line height is  really important on a great design. Managing white spacing is crucial when you are dealing with blocks of text. Cleaner will check that the Line Height is consistent through out your site, taking in consideration the correct height for the font size and doing it block per block. This means that if you have X number of  Text apps with the same formatting (say H3)  in one particular block, all of them will get adjusted to the same line height.

Here’s an example of a text paragraph before and after the Cleaner

This is the same text paragraph after the Cleaner

Kerning

Kerning refers to an adjustment of the spacing of two specific characters.  The main objective is to create a perfect letterfit and balance of the characters. If kerning is not adjusted properly within your text, Cleaner will fix it for you bringing balance back to your text.

Kerning before Cleaner

Kerning after Cleaner

Margins

Cleaner will adjust the margins of every single app, column, container and block. Your design could look inconsistent if the margins and padding are not properly adjusted. Let’ say that you have an application with a top margin of 20px and at the same time this app has a bottom margin of 35px, well, Cleaner will adjust both margins to be the same, in this case both will be 20px.

Margins before Cleaner

Margins after Cleaner

As you can see, our Cleaner feature can take care of the styles of your site with just one click. Please let us know if you have any comments or questions in regards to this new feature.