The Author
An audiophile, geek and a cinema fanatic interested in all things technology.

When most people hear the term “Typography” what usually comes to mind is typefaces and their style. In fact though typography is more about what someone can DO with them. Letters form myriads interconnections and relationships with other element in our composition such space, texture and rhythm etc. And the interesting quality of Typography as a visual discipline is how we can relate its parts (letters) to the whole (our composition).

For many years in the web design field we were limited using a small subset of typefaces, like Verdana, Arial and Georgia and we couldn’t do much with them either, just basic things like changing the weight or using pseudo-italic, changing color etc. And in order to do so we had to use code.

In the past years our typography options have been greatly expanded. We can now use a multitude of web fonts, set columns, adjust kerning, line-height and more. What we’ll learn today is that we can do so, without writing a single line of html or CSS code using Webydo, the most professional website creator out there.

Webydo is an online DMS (Design Management System) that allows us to design, manage and publish our websites all in one place. More importantly though it free us from our coding limitations and allows us to create a website visually.

In this article, we will explore in depth the Text tool of Webydo and I will show you some of the typography options it offer us, plus a few more things.

To follow along simply register to get your free Webydo account, and then choose to start with a blank layout.

Untitled-1

To place a text element in the canvas, simply click on the “Text” tool. You can then adjust its size with the handles and position it by clicking, holding and dragging.

Double clicking on the text element, allows us to add our text and also access the typography options.

Untitled

The first pair of values, W-H gives us a more precise control to set the width and the height of our text frame. The second pair T-L refers to the placement of the text frame. But note that we can’t edit those values while in text editing mode. If you need to alter them, click outside your text frame to deselect it, and the click on it once. This way we get to access and change the text frame itself.

In the second region of tools, we can select the typeface, size, bold, italic, underline, set color, choose the text alignment, add bullets and number lists, indent the text and finally set the text direction. We need to be in text editing mode to access those.

Let’s explore some of these options now.

Setting a font is very easy. Simply select your text, and then choose a font from the drop down menu.

Untitled-2

To change its weight, make it italic, change its color or underline is also as is easy. Select the text you want to affect and then click on the proper tool.

Untitled-3

To change the color, click on the swatch and then select “more colors” if you can’t find in the presets the one you like.

Untitled-4

The next two tools in the text options allow us to control the kerning, and the line height.

Untitled-5

With the next 3 tools, we can add a horizontal line, a table or an image to our text frame.

Advertisements

Untitled-6

To add a table, simply click on the “Table” tool. You can then specify its various settings as you can see in the screenshot, and hit “Ok” to place it in your text frame.
In order to add an image on the text frame, you can simply click on the “Image” icon.

We can then “Upload” our image, set its width & height, title & alt text. We can also select if it will be linking on an existing page or a link. We also have 3 options to align our image within the text: Left, Right and Center.

Untitled-7

Finally we adjust the space (padding) between the image and the text horizontally (affects right and left padding) and vertically (affects bottom and top padding).

Untitled-8

The last tool within the inline image settings is “arrange”. This can bring our image front or back in relation to another image.

Back to the text frame options, the next 4 tools enables us to adjust the padding of the text box. You can see from the arrows which side of the text frame you are affecting. So let’s go and add 10 px padding on the right and left, and 5 on the bottom and top. And also fully justify our text.

Untitled-9

The final tool allows us to create a hyperlink. Simply select the word you want to create the link for and then set the url it will be going.

Untitled-10

So now let’s see how we can create a multi-column text. Well easily. We just add another text frame, or more depending the number of columns we need!
To align two (or more) text frames, select them all with Shift+Click, and then choose the desired alignment.

Untitled-11

Finally if you want to set a color to your text frame, change its corners, add a stroke etc. you can do so from the right panel.

Untitled-12

In the “Stroke” panel we also have the option to set a “corner radius” and make our text frame corners rounded.

Untitled-13

Untitled-14

Our final layout is ready and we didn’t write a single line of code!

Try out Webydo today for your web design projects and unleash your creativity without being limited by your coding skills! If you have any questions feel free to comment below!


Advertisements