Online tool: text style tester

I’ve added a new tool to the online tools for webmasters and web developers which are already available on my site.

This new tool can be used to create some CSS styling for text. It looks like this:

Text Style Tester

You can enter the text you want to style in the upper text area and then select in the lower part of the UI which attributes you want to set. It currently supports the following:

  • Font family: It provides a list of web safe fonts you can select from
  • Font size: You can define a font size in “ems” (em: scalable unit based on the current font size), pixels (px), points (pt: fixed-size units used in print media) or percents (%: scalable unit similar to ems)
  • Background color
  • Foreground color
  • Bold and/or italic
  • Underline, Strikethrough or none
  • All caps (uppercase), capitalized (similar to Camel-Case) or none
  • Left, center, right alignment or justified
  • Letter and word spacing
  • Wrapping

Every time you change some of the properties in the lower pane, you will see that the text styling changes to reflect this and the corresponding CSS properties are shown in the text area in the middle.

There are a few more things that I still need to add:

  • Leading spaces
  • Line height
  • Border size, color and style
  • Text and box shadow
  • Corners
  • Lower case and small caps
  • Oblique
  • Overline
  • Margin and padding
  • Width and height
  • Indentation
  • Kerning
  • Writing direction
  • Vertical alignment
  • Containing tag (e.g. div, span, p)

Hope you enjoy the tool ! Feel free to leave a comment below in case you see something wrong or have a suggestion how to further improve the tool.

Leave a Reply

Your email address will not be published. Required fields are marked *