Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Pumping Up Prototypes With Floats, Borders & More

on Monday 3rd of June 2013

Presenting sweet upgrades that’ll give you better control over elements and help you create more-detailed compositions. Boy it’s a good day to love type.

example article designed with our new features

Take control of element spacing, inside and out

Now you can set width on individual elements – picking from px, % and em (yes em!) units of measure. It’s a small but important change that we think will give you a lot more design flexibility. Go with % units for more fluidity at different container widths.

You can also now set left, right, top and bottom margins and padding on elements. (If you’re new to CSS, margins control the spacing around the outside edges of the box, while padding controls the spacing around the inside edges.) That’s total dimensional control over the element, so you can get text exactly where you want it.

Set the flow with floats and clears

Use these handy dandies to change up your text flow, add shape and visual interest to your typographic composition, and create a current that glides readers down your page. (CSS Tricks has a great write up all about floats.)

Structure and emphasize text with borders

Pair margins and padding with a border and you’ve got yourself pull quotes, interface buttons, faux columns and navigation items. From the tool panel, you can set solid, dashed and dotted borders and apply color. To create more advanced borders, like inset borders or rounded edges, just pop open our CSS editor and key the values you need.

Give type added depth with text shadows, or offset it with color

Create letterpress, embossed and other text effects using actual web fonts instead of images. Plus give individual elements background color.

You focus on the look, we’ll deal with the code

Like always, while you work away on the visuals, our app will add every position, measurement and setting you apply on the canvas to your CSS and HTML. We’re nice that way!

These newbies should help you amp up the precision in your typographic prototypes and craft more realistic, robust designs. Let us know how you get on.

Don’t have a Typecast account? Start a free trial to see what you’re missing. You smart cookies already using our Typecast design tool can just   sign in now   to give ‘em a go.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus