deviant art

Deviant Login Shop
 Join deviantART for FREE Take the Tour
[x]
more ▶

More from ^pica-ae in News

Featured in Groups:

Details

July 4, 2011
Link
Thumb

Statistics

Comments: 21
Favourites: 48 [who?]

Views: 812 (0 today)
[x]

Text Art Tips #3

Mon Jul 4, 2011, 4:36 AM
[This is an updated article! Nothing new yet, sorry.]

Finally the third news article in my TextArtTIPS Series!
Check out the previous issues Text Art Tips #1 & Text Art Tips #2

Third Set of Tips On How To Improve Your Text Art & Typography


Script Fonts



A script font in capitals is almost impossible to read.


Comic style fonts work in Capitals.

Script, or chirographic,  fonts can give your artwork a nice personal or realistic touch. But there are some things you may want to pay attention to, when it comes to using them.

Most importantly: do not use Capitals!
Traditional script fonts have big and with swashes decorated uppercase letters. Writing in capitals makes your text unreadable and it does not look good.

However other, new, script fonts, that imitate hand-writing rather than script-writing or calligraphy,  are designed to work in capitals as well. They are created without swashes and have a more casual feel to them. The most famous example for those fonts are Comic books.

Don't add too much Kerning!
If you zoom into words written with a script font, you will notice how the letters connect to each other as if they were written with one stroke. Increasing the kerning would break this up and the font would lose its charm.


Headlines & Copytext



In my examples I am using the same 2 fonts (Times & Limelight) to show you what I mean. The second example looks far better, simply by exchanging the fonts for each part of the text.

There are a lot of mistakes to make here. In simple words: Headlines can always be fancier than copy. Why? Because headlines are shorter and bigger. Copy is long and smaller.

What you should not do in copy:
  • Caps. They make texts harder to read.
  • Bold font weights. The smaller the text will be displayed at, the more blurry the copy will be, by using a bold font weight.
  • Use enough line-height. A general rule is to have a line-height of at least 120% of the font-size. 10pt font-size/12pt line-height, 15pt font-size/18pt line-height, 20pt font-size/24pt line-height etc.
  • Center text. This gives the eye no place to go. Long lines are hard to keep up with.


Canvas


Example of the 4 most familiar formats.

There are 4 canvas formats:
  • Portrait.Height > Width
  • Landscape. Width >  Height</b>
  • Square. Width = Height
  • Panorama. Width >>> Height or Height >>> Width (Obviously Panorama is basically an extended version of either Portrait or Landscape.)
When setting up your file with the format you like, remember to choose the right size. Depending on where you want to use the design, you have to change from pixel to mm or inch. Also don’t forget to set the ppi to the right amount; 72 ppi for web publications and 150 or 300 ppi for print.
However when you create your design in a vector based program, those are things you can easily edit later in the design process.


Examples of the 3 main formats with the same word incorporated to show the difference in appearance.


Photos


This photo offers a lot of space for text.





Solutions for displaying text on a busy background.

Sometimes you want/have to combine a photo and text. If you have an image that has a quiet area with similar colors, you can easily place the text on the sky and it will be easy to read.

But you may not always be that lucky!



There are many ways to keep your text readable, even on busy backgrounds:
  • Sometimes changing the font color is enough.
  • You can apply a drop shadow or an outer glow to the text. You should pick a color that is ferquent in the image, and change its opacity unitl the text is easier to read.
  • Another option is to add a solid color layer below the text. Even with a lower opacity this will help, increase the texts readabilty.
  • And if all that doenst help, you may just have to edit the photo until the text fits. Especially since Photoshop CS5 and content aware scaling and fill, this has become a lot easier :XD:


Vignette


The counter of letter “O” replaced by a simple blossom.


The word “love” replaced by a heart shape.

Vignettes are decorative elements usually in books, used both to separate sections or chapters and to decorate borders. But a vignette can also be an image, in iconographic form, integrated into a word.

Logotypes often use vignettes as well; when a logo is set next to the company name. (In German we call it “Wort- und Bildmarke” which translates as “Word and Image Brand”.)

Sometimes a whole word can be replaced by a vignette as well. Most famous example of this is the the "I :heart: NY" t-shirt design.

A vignette can be as simple or detailed as you want. It will add an illustrative touch to your art, no matter how much work is actually put into creating it.


Look out for new fonts


There is always need for new (free) fonts ;) Collecting fonts should be considered a hobby! At one point, you may realize that you don’t need that many fonts, but it feels good to have them. You may end up using only a certain number of fonts for most of your work :cough: Helvetica :cough: but why not get as many fonts as possible in the meantime? :XD:

Font Resources:


Creating your own font


Example of a word converted to shapes with its anchor points active.





Standard gradient fill and other solutions for creating a gradient.

I am not going to explain the whole process of creating a font here, because it is complicated and time intense. (I may do so at a later point :).) But I can point you at some things that are important before you begin to design your own typeface.

Fonts are vector files. Which means they are indefinetely scalable; e.g. you can change the font size up to 2483 pt if you like and there is no loss of quality.

Font files can only contain 1 color and no semi-transparencies! It is one color and negative space. No gradients or images are possible. There are ways to give the impression of that though.

A regular gradient is not possible. Creating a gradient using lines/shapes of different heights is an option to imitate a gradient. Or you use a triangle, duplicate it multiple times horizontally and you will have another option of creating a “fake” gradient. Using a method, similar to screentones, will give good results as well.

A real life example of this practice can actually be seen on airplanes :B  This is done to save ink and by that money. Distance is the key here ;)

If a font contains more than one color or images… it will not come as a .ttf or .otf file and you will not be able to type your text. You will have to place each letter on its own manually! Of course such “font files” are avaiable as well, but it always demands more work from the person using your font.

If you decide to offer an illustrative font like that, make sure you use image files with transparent backgrounds around your letter! You can use .png, .eps or .svg files for that purpose; they are not dependant on a certian program and can be used by most people :)



Take your time!


Like Paul McCartney once said: If the song is too short and you have no more lyrics... repeat the first verse." (at least i think it was him :B) so, here we go again :la:
Really, dont rush any artwork you are doing. Especially in Text Art it is easy to just add a line of text to a canvas and you think you're done. This is not the case. Try different things, experiment with colors, with font sizes, textures, canvas sizes, kerning and and and. Just don't be done in 5 min.

More News Articles About Learning Text Art and Typography:


Thank you for reading!


I hope this News Article was helpful :aww:
Feedback is highly appreciated :)

If you have a question or ideas for more tips, just let me know. I will try to answer them or add them to the next TextArtTIPS issue.

Cheers,
^pica-ae :heart:

Add a Comment:
 
:icondpcdpc11:
thanks for sharing picae! love to follow ur profile!
just one thing in this last article... instead of:
Font files can only contain 1 color and no transparencies! It is one color and transparencies.

shouldn't it be:
Font files can only contain 1 color and no transparencies! It is one color and NO transparencies.
??
Reply
:iconpica-ae:
^pica-ae Jul 19, 2011  Professional Interface Designer
thank you :)

I am not sure what you mean :confused:
I think I wanted to express "one color and negative space" . cos as it is now, the sentence is just repeated…
Reply
:iconvashtastic:
=Vashtastic Jul 6, 2011   Digital Artist
is this the article i couldn't seeee?
Reply
:iconpica-ae:
^pica-ae Jul 6, 2011  Professional Interface Designer
yes :B but that was my fault, i forgot the .com at your e-mail :facepalm:
Reply
:iconvashtastic:
=Vashtastic Jul 7, 2011   Digital Artist
lol <3 i still love you
Reply
:iconpica-ae:
^pica-ae Jul 8, 2011  Professional Interface Designer
yaaaaaay :la:
Reply
:iconkuschelirmel-stock:
=kuschelirmel-stock Jul 6, 2011  Hobbyist Digital Artist
:love:
Reply
:iconpica-ae:
^pica-ae Jul 6, 2011  Professional Interface Designer
:la:
Reply
:iconcma3d:
~CMA3D Jul 4, 2011  Student Digital Artist
<3

I LOVE this ;D
Reply
:iconpica-ae:
^pica-ae Jul 4, 2011  Professional Interface Designer
thank you :D :hug:
Reply
Add a Comment: