Lean Design Blog

How to: limiting text formatting options for better results

Text formatting options the Blocks Edit way.

A bunch of text formatting interface options with a big red restricted icon over them.

By default, Blocks Edit has two formatting options for text: bold and italic. There's no text alignment, no custom colors, no bullets. This is intentional, as we err on the side of sticking to a design's guidelines by limiting the ways that someone can potentially deviate from them.

This means that in order to allow for additional options, they have to be a part of the template. Here's the way we look at these additional formatting options and some recommendations for including them in your editable template.

Text alignment

It seems like a simple thing to include for text options, but there are times when this can be overused. Think about the actual need of anything besides left-aligned text. There will probably be some good cases for centered text, but right-aligned would probably be unnecessary 99% percent of the time.

The Blocks Edit approach to text alignment, in addition to left-aligned, is to add variants, alternative design choices for specific content areas that would look good with different alignment properties. This also allows you to align elements like buttons that may require additional design and code tweaks.

Color options

Having a bunch of color options, a color picker of some kind, or a custom color field, is always a recipe for disaster. From garish color choices being made, to too many colors being used throughout text, to deviating from brand and theme colors. It's never a good idea. The Blocks Edit approach is again, to add variants for areas where color alternatives may be appropriate.

The general rule to follow is to use variants for specific purposes. You can even combine formatting options for a variant. For example, for a really important text area you can have a variant where the text is bolded, in red, and centered at the same time.

Bullets

A way to offer bulleted lists is to make them stand-alone components that can be dragged into parts of text where they're needed. This allows for various design options of your bullets that wouldn't normally be available as part of a standard WYSIWYG text option. You're also able to ensure your list design is coded to look good across email platforms. Using the repeatable region option for the list items is how someone can add items to the list.

Linked text

There is of course the option to add links to text which involves its own formatting. By default, linked text is underlined. To use a specific format for links, you can use link styles. Just add a data-style attribute with a unique variable name to an example formatted link in your template. This will add the link formatting as a variant when text links are added.

For all the details on the editable tags to add for your template's text formatting options, along with other functionality, check out the tags docs.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building websites and emails for over 15 years