Designing Bullet Points

What Can You Do When Bullet Points Become Boring?

Designing Bullet Points

Let’s admit one thing. Everyone loves ugly and boring bullet points. Like it is not enough, there is a reason people call it bullets. It simply makes reading easier, breaks the point nicely, it is cleaner and reads faster.

But what if we want to take our bullets to the next level? Below, 3 cool solutions for beginners and advanced users.

Use typography

Use typography instead of bullet points

Light font style, increased line spacing, aligned to center

Simple, old good typography can help a lot. Try not to be too fancy as it might create an opposite effect if you overdo it. Just change the type to be bigger, change the colour, alignment or use a different font style. You could also increase the space between the lines.

HOW TO DO IT

How to change typography for bullet points in Word

How to change typography in Word

In Word, you can do it by changing font properties. For spacing, right click on the text. Go to paragraph and change the space after/before or line spacing.

In WordPress, the same rule, just change the font properties or add space by pressing enter. For more custom space you can add a CSS code to your paragraph:

<span style =”line-height: 16px;”>Your paragraph goes here</span>

The 16px will change according to the size of the space that yo would like.

Use line dividers

Use line dividers instead of bullet points

Simple line divider with increased line height

Separate the points you have made with lines. For this part it would also be good to have some extra space between the lines for more clarity.

HOW TO DO IT

How to insert a line in Word

How to insert a line in Word

In Word, you can achieve it by drawing a line with a shape tool or creating a simple table with a bottom border only.

In WordPress, blog post you could also draw a table or just use the below code to add a line, where border-color is its colour. I used it on my home page.

<hr style=”border-color: #C62128;” />

Use icons or images

Use icons instead of bullet points

Simple tick icons with increased line-height

Search in your image library for some simple icons that match the style of your presentation or any other piece that you are working on. Please try to avoid going full fancy here and using hearts, flowers or smiley faces.

HOW TO DO IT

Custom bullet points in Word

My own tick icon for bullet points in Word

In Word, there is an option to choose ticks instead of bullets. If you would like your own custom shapes, you could use a site like this: Copy Paste Character, with many existing icons, just to copy-paste symbols into your work.

I am not crazy about the Word default tick icon so I inserted my own image (like on the screenshot above). If you like how my tick looks, click here to download it. In Word choose from the bullet drop down: Define new bullet. In the pop-up window click on Picture and upload your own, custom icon.

In WordPress, again feel free to download my icon, or any other image and follow the instructions below to add your custom code to the list. If you would like to see an example, I used this code in this article.

  1. Add the below custom CSS code

    ul.tick {
    list-style-type: none;
    }

    li.tick {
    background:url(your image url) no-repeat left;
    vertical-align: middle;
    padding-left:25px;
    }

    #content ul {
    padding-left: 20px
    }

    #content ol {
    padding-left: 20px
    }

  2. Add the below classes to you lists

    <ul class=”tick”>
    <li class=”tick”>I am a cool Bullet Point</li>
    <li class=”tick”>I am a cool Bullet Point</li>
    <li class=”tick”>I am a cool Bullet Point</li>
    </ul>

Conclusion

Making bullet points cool does not have to be complicated, you can fix them with few simple tricks. The above instructions are very brief so if you need any further help just ask me!

Tags:
No Comments

Post A Comment

By continuing to use the site, you agree to the use of cookies. Privacy Policy

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close