Fun with fonts and typefaces.

Image

I love playing with fonts. There are designers who have made careers simply by designing fonts. Fonts can make or break a design or stand alone to evoke a mood. There are hundreds of thousands of fonts to choose from but only a relative few that are in common use.

Whats the difference between a typeface and a font?

Examples of script, sans-serif and serif fonts.

The Business Dictionary definition of a typeface is:

“Letters, numbers, and symbols in consistent type-weight and typestyle that make up a complete set (type family) of a distinctive design of printing type such as Ariel, Helvetica, Times Roman and thousands others.”

And a font as:

“Complete set of all characters that comprise a given typeface in a specific point size: capital (uppercase) letters, common (lowercase) letters, small caps, numbers, and mathematical and other symbols.”

Comparing fonts using pangrams:

A pangram is a sentence that contains all the letters of the alphabet in a given language.
In English the sentence best known and most often used is:

“The quick brown fox jumps over the lazy dog.”

Examples of fonts.

(My French isn’t fluent but I’m told that the French equivalent is:

“Buvez de ce whisky que le patron juge fameux.”

which translates to: Drink some of this whiskey, which the boss finds excellent. )
French Pangram

Serif and Sans-serif.

All fonts can be broken into two groups Serif – such as Times and Sans-serif such as Ariel.
Serif and Sans-Serif fonts
A serif is the small line,decoration or “curly que” that is at the end of an individual letter. Fonts with out serifs are called sans-serif (without serif).

Usable fonts.

The font you use depends on your medium, print and/or the web,and your good or bad taste.

Conventional wisdom is that a sans-serif font is easier to read on screen and serif fonts are easier to read in print but it’s generally agreed you should never combine the two.(However rules are made to be broken.)

There is a growing number of overused fonts that Graphic Designers love to hate. You will find numerous blogs on why you should never use Comics Sans MT, or Papyrus but I bet you can’t go a week without seeing one of the “Terrible Ten” which are:

Overused fonts.

(OK, so “Chiller isn’t on the list, that’s my own personal peeve!”)

  1. Comics Sans MT
  2. Papyrus
  3. Courier
  4. Impact
  5. Curlz MT
  6. Bradley Hand, (infact almost all script fonts hit someones hate list)
  7. Frankenstein
  8. Trajan
  9. Bank Gothic
  10. Garamond

The other two fonts that nearly always hit peoples lists of overused and most hated are:

  1. Ariel (in all its various forms)
  2. Times New Roman

The trouble with Ariel and Times is, if you are designing for the web you almost have to use one or other as a default.

Fonts on the web

If you want to make sure that your text appears exactly the same way on all browsers, and platforms you have to make an image. Otherwise, you are at the mercy of your audiences browser and have to guess how your text will appear. Guess? Well yes. It is an educated guess but let me explain.

Back in the early days of HTML the only way to place your text where you wanted it was to use a table.(This practice is now frowned upon.) Then the W3C (The World Wide Web Consortium) decided to split content from design. HTML takes care of the text content and CSS (Cascading Style Sheets) takes care of the text design or “style” of your text. (For many reason I won’t go into here this was actually a good thing.)

Style (for web typographical purposes) covers:

  • font
  • color
  • spacing
  • positioning

So what’s the problem? I don’t know what fonts my audience has installed on their devices! I’ll say that again.

“I don’t know what fonts my audience has installed on their devices!

I can specify what ever font in whatever size I like but, if for whatever reason your computer/tablet/phone doesn’t have that font installed, your browser will render its default serif or sans-serif font.

For just that reason CSS allows you to choose a list of alternatives. Having said that even two very similar fonts can display dramatically differently on two different devices. This is why you see so much of Ariel and Times, they are safe because almost all computers have both fonts installed. You will have plenty of pre-installed fonts on your computer but if you’ve been installing your own you can run into problems.

Slightly geeky bit over.

Fonts for Photography, and Images.

If none of the fonts on your device convey the image or message you want or you just want to have fun playing there are lots of places to find fonts. Many are free but some specialty fonts you will have to pay for.
Here is a list of places to start looking:

not to be confused with…


Feel free to pin this blog and follow Lyn’s “Safe 2 Pin” board on Pinterest.
Follow Camera Photo Art and Lyn Safe 2 Pin on Pinterest

I’m a Control Freak!

Following on from last weeks blog, Where do I build my Portfolio you’ve looked at the options of hosted sites but you have decided you want to do it yourself.

Building your own website.

You’ve looked at the options and decided you want complete control over your website but….you don’t know where to start.

You have choices, in fact probably too many. Don’t worry let’s look at your options.

First of all:

  1. You can hire someone, ie a Web Designer
  2. You can do it yourself

But wait! Even before you make this decision you need your own domain name.

Choosing a domain.

Your domain name is your brand. (What you want to call yourself and how you want to be known.) Even if you are hiring someone else to do the work for you I strongly suggest you register your own domain name. In fact, even if you are hosting your site at one of the photography sites mentioned last week, your own domain name is always a good idea.

Note

About ten years ago, before I knew better, I found myself in the situation where the designer I had hired for a company I was with, allowed the registering company to register our domain in their name. It took several months to get our name back and then only because the designer was being nice and had other clients in the same position. You may not be so lucky.

When possible your name should be short, easy to spell and descriptive. This is probably the most important decision you will make. Remember you are going to have to live with this. If you already have an established name by all means use it.

Buying your own domain is relatively easy shop around as deals and special can change weekly.

Try any of the following:

If you have the option, go for .com but don’t be bullied into getting the .net, .info, .name etc that will be offered unless you know that you actually want to use them.

The exception to this might be if you can’t get the name you want but you can get your country. For example: your name is John Smith you try
JohnSmithPhotography.com but it already belongs to someone else, try, for example:

  • johnsmithPhotography.co.uk if you live in the UK
  • johnsmithPhotography.ca if you live in Canada

The other exception for buying multiple names is if you have a name that is commonly spelled more than one way. JaneMcdonaldPhotography.com, and JaneMacDonaldPhotography.com would be an example of this. You can have the wrong spelling set up to point to the other site.

At the time of writing You should be able to get the name of your choice for under $20.00, in most cases under $10.00. It is a good idea to add privacy to your listing but you don’t have to if you don’t want to at this point.

You do not have to host your sight where you buy your domain although this can be a good idea. (If you subscribe to the Creative Cloud domain hosting is included for up to five domains.)

Hiring a professional

There are lots of good reasons to hire someone to do the work for you but don’t expect it to be cheap and don’t expect that you’ll be completely off the hook for as far as making decision are concerned. A good web designer can be worth their weight in gold. If you’re not technically inclined and you don’t want to do the web work yourself, (and you have the budget) by all means hire someone and concentrate on your photography.

Expect to sit down and discuss, colors, styles, logos, fonts and feel. Look at sites you like for ideas. Be prepared to spend at least a couple of hours talking to your web designer. Ask your designer what he/she has done before and ask for references. (Just because you don’t like some of the sites a designer has done you shouldn’t rule them out if they have good references; their client may have wanted lime green with fluorescent pink and orange spots. Your choices may seem quirky to others too.) Don’t be frightened to get more than one quote but don’t necessarily go for the cheapest option.

Ask for a breakdown of services and costs before you start. Make sure that you will be able to change and add to your images. If you are going to sell from your sight look at the options for shopping carts. Make sure that SEO (Search Engine Optimization) is included.

Hiring a Student

No, I’m not talking about your next door neighbors ten year old (although they may be really good). Schools and collages often have students that will make your site for you at a reduced cost as part of their curriculum. Expect to go through exactly the same steps as you would with a professional web designer but expect the process to take longer. Make sure that the Teacher or Professor will also be available if they run into problems.

Doing it yourself.

I’m going to presume that if you have got this far you are fairly comfortable with the idea of either coding, using templates, including blogging platforms such as Tumblr or WordPress or using a WYSIWYG (What You See Is What You Get) editor such as Adobe Dreamweaver or Microsoft FrontPage.

There are literally thousands of templates that you can download for free or a small fee. Places to start looking are:

Most hosting sites also offer templates/themes as do WordPress.org and Tumblr.

With the launch of Adobe’s Creative Cloud subscribers can now host up to five websites. Depending on how many photographs you have this may be an option for you. If your subscribing to the cloud you also have access to Dreamweaver and Muse for designing your site.

For tutorials on web design and html coding try Lynda.com, Web Monkey, IWA/HTML Writers Guild, and, of course, the W3C.org (World Wide Web Consortium).

With a little research, you can find your comfort level and soon have the site you want.

The Mystery of the Dissapearing Duck.

OK, so its not much of a mystery but I am just having so much fun with the Content Aware Fill that I thought I’d share.



Creative Commons License
The Disappearing Duck by Lyn Tuckwell is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
Based on a work at www.cameraphotoart.com.
Permissions beyond the scope of this license may be available at http://www.cameraphotoart.com.


To follow along with this tutorial download Quakers, (the duck) by right clicking on the image.
Quackers the duck.
Creative Commons License
Quackers by Lyn Tuckwell is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.cameraphotoart.com.
Permissions beyond the scope of this license may be available at http://www.cameraphotoart.com.