FREELessons: 9Length: 48 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Modifying Type

You can change both the content and styling of text in a page via VisBug using the “Edit Text” and “Font Styles” tools. We’ll see how to go about doing so in this video.

2.3 Modifying Type

Hey, welcome back to VisBug quick start. In this lesson, we're gonna look at the ways that you can use VisBug to modify the text or the type of your site. The first thing you're gonna check out is the ability to actually change your content inline. This is really, really cool. All you need to do is choose this tool here, that's going to give you a little text cursor. And then, you can click anywhere, and you can add in changes just like that. You don't necessarily, actually have to have this tool selected. You can have any tool selected. And then, all you need to do is hover over a text element, double-click, and then you can edit. So, that's something that has a potential to be super helpful when you're going through the process of just maybe making minor tweaks to copy. Doing things like testing how headings work if they're pushed out to multiple line heights, and making sure that everything is still flowing well in your content. Lots of different possibilities there for editing and for testing. You also have this little tool here, the Font Styles tool, which you can open up by hitting the hotkey F. Then you can just select any text element. And just like with every other tool, you can now use keyboard shortcuts to modify their typography. So to modify the size you just have the up arrow to get bigger, and the down arrow to get smaller. Unlike with the other keyboard shortcuts though, you don't want to hold down shift to make that go faster, because the shift modifier does something else which we're about to go over. You can also modify the text alignment with the left and right arrows. So if I wanna center, I hit the right arrow one time, and to right align hit it again, and then the left arrow to go back the other way. I can also modify the white of the text by holding down control and hitting the up arrows to increase the weight. How many times you can increase the weight obviously depends on how many weights that font has available. Control down will then decrease the weight. Then you also have letter spacing. If you hold down shift and hit the right arrow key, you increase the amount of space in between the letters. And then to reduce it again, hold down shift and the left arrow key. And then the last thing that you can change is line height. Which is actually described here as Leading. So, I'm just gonna select this paragraph here, I'll hold down shift, and hold down the up arrow key. Then it increases the line height, and likewise, if I hold down, it decreases the line height. This is also a good time to mention that you can actually copy and paste styles from one part of your site to another. You can do this with any styles, but it works particularly well with type styles. So I'm just gonna modify this paragraph a little bit more, so you can see it a little bit more clearly. Gonna increase the size. And we'll make it bold text, and we'll give it some weird-looking letter spacing. Now, with this text selected, if I go control, alt, C, that will copy all of that style and it would just add it in. Then select the second paragraph and go control, alt, V, and all of that styling has been carried over. So that's yet another thing that can be super, super useful when you're trying out different design styles in your site. And then, once again, if you don't like the changes that you've made and you want to clear them, just hit alt,delete, and it'll go back to its original form. Right, so that covers modifying type in VisBug. In the next lesson we're gonna move onto modifying layout. There's a whole bunch of stuff that you can do. It's really helpful, and we're gonna go through all of it in the next lesson. I'll see you there.

Back to the top