Free typography resource

| 0 Comments | 0 TrackBacks

To follow up on the type articles posted earlier, the other day we noticed that Google is serving up a few open source fonts.

The Google Font Directory

... combined with the Google Font previewer, it couldn't be easier to build the code required to use type in your web pages.

Although there are some nice faces available, I hope the selection will be improved over time.

If you manage your own domain registration(s) for domains which are hosted at, you may wish to know that we have added a name server to our network for additional stability.

This machine is up and running in Texas, and you can add DNS server to your domain registrations. This addition is to remedy a specific issue we encountered several times this year and it provide additional stabillity to web and mail services.

Please let us know if you have any questions or need help with this. (518) 794-7772

Well designed type can add to the overall professionalism of your company's web site. Over the years, I have had the good fortune to work with a number of designers on various web projects. In the past many of the designers who were used to designing for print would note the lack of real choice in type faces.

The main technical problem has been that fonts in a design had to exist in the user's system, and designers could only really count on those provided by the operating systems' publisher being present. On top of that similar faces had differing names on different operating systems, so CSS2 relied on font matching to allow the designer to "guess" several different fonts that might exist on the users' systems, and the browser would choose the best match.

Recently I have seen several articles at A List Apart that discuss the CSS 3 reccomendation : @font-face The following image ( from left to right: Chrome, IE, Firefox )demonstrates browser support for the reccomendation, while much wider, is still not universal. Links to articles are listed below the image.


I haven't used this on any sites yet, but I expect to be using it on soon. Fonts are copyrighted works of art, so as you look for fonts to use on your next web site, be sure to observe the original author's license. Here are a few sites I looked at with different commercial arrangements for getting fonts on your site:

  • TypeKit is a commercial service allowing you to link to fonts. (There is a free trial available)
  • Typotheque Web Font Service offers free trials and "one time licensing" for web fonts.

... and a couple of sites with no cost licenses.

New Support Contact Info

JSW4NET Inc is changing the way our voice network is configured and telephone support for KinetixHosting will now be handled through this new number:

(518) 794-7772

KinetixHosting by JSW4NET Inc, is pleased to provide a range of support contact methods, so our customers can use whatever method works best for them. If you have any suggestions about other ways we could support your company, feel free to let us know.

One of the features of Movable Type that give it so much power and flexibility is the templating system. By changing code in the templates, designers and site architects can customize both the content and display of discrete page parts and whole pages, and also change the way the pages are organized into a completed web site. While this feature represents a powerful side of Movable Type, it also presents its own set of problems. In the past, it has been noted that MT took a long time to rebuild.

Recently while working on we implemented Template Caching and realized a 4 fold reduction in rebuild times. Here's how the savings works.

When you publish or re-publish a site in Movable Type, pages are regenerated by querying the database. This includes many template modules such as the list of categories in the sidebar as well as the main content for each page. In fact the items on the side bar often have multiple lists with counts for the items in the list, not only necessitating the retrieval of data, but also calculations on the whole database. Fortunately databases are very fast and this only takes a fraction of a second. However each page may require many requests to the database, adding up to a few seconds for each page. In some blogs that can add up to quite a lot of time over the whole rebuild.

As of version 4.0, Movable Type provides a mechanism to tell the templating system only to rebuild certain modules once, and to save those modules, or cache them, for a certain period of time, or until a certain event occurs. (An event such as the creation of a new blog entry.) This can reduce the number of times MT must make requests of the database and considerably speed up the whole rebuild process. In the example mentioned we are running more or less "out-of-the-box" MT blog templates and the rebuild time went from around 4 minutes to just a little more than a minute.


Many items are only valid until some data in the blog changes. Template modules and widgets can be cached until an event occurs. Take for instance the list of recent entries found on many blogs. This list only changes when the author creates a new entry. It does not change when a reader makes a comment, and so, even though some pages have to be rebuilt to show the new comment, there is no need to request a list of recent entries from the database and the cached data can be used.

Modules can be cached based on age for a specified number of minutes, hours, or days. You may have a feed from another source on your site. Instead of requesting the data every time a page is built, it may make sense to request that external data only once a day, or every 24 hours. If you have headlines for a more frequently updated news source, you might choose to cache the module only for 15 minutes so you had up-to-date headlines on your blog.

To use caching you must first enable it in the blog publishing preferences. All of these template caching techniques when combined can add up to a large potential time savings when rebuilding your blogs.

Private tags, hidden pages


There are pages on a site which you might not want to appear in a list of all the pages on your site. If you make a custom 404 error page, that really doesn't belong in a site map. If you have landing pages such as "Thank you" pages displayed for users after they submit a form those don't really need to be listed in menu lists.


In order to manage those kinds of pages with Movable Type you need a way to tell MT those are "hidden" pages and not to put them in lists of pages. One way is to use a private tag to mark the pages, and then look for that mark when you build lists in your Movable Type templates. In MT beginning an Entry Tag or a Page Tag with an at symbol (@) makes that tag private. Private tags won't be displayed in lists of tags, they are only seen by the author... or in this case the templates.

How did we do it?

As shown in the illustration, we used the tag @hidden to designate the pages we don't want showing up in menus. In templates we used code like this snippet from the Page Listing widget

<mt:Pages tag="NOT @hidden" no_folder="1" sort_by="title" sort_order="ascend">
    <ul class="widget-list">
  <li class="widget-list-item"><a href="<$mt:PagePermalink$>" title="<$mt:PageTitle$>"><$mt:PageTitle$></a></li>

The tag="NOT @hidden" attribute value pair we used is valid to modify the <mt:Entries> tag as well as <mt:Pages> tag. Although, off the top of my head, I don't know why you would want to hide an entry.

When a user creates an entry or a page in MT, they are given the possibility of entering keywords in a separate field. If the field is not visible in your MT editing page, you can change the "Display Options". MT uses this data when it performs a search, but this data is not "visible" to Internet search engines.

Display OptionsIt should be noted that the code in this tutorial has a lot of conditionals, so it may not scale well for your whole blog. Which is to say if you have thousands of pages or entries, this may slow down your rebuild process... maybe a little or maybe a lot. How much really depends, on lots of things that are beyond the scope of this post.

Next to useless?

There is a standard HTML head element, which contains meta data. The standard does not define what kinds of meta data may be present, but one very commonly used meta element is keywords. It is sometimes referred to as meta-keywords or the <meta> keywords attribute. Google says that http-equiv attribute keywords is next to useless. In the same article they note that it is still the second most commonly used attribute value of the meta element.

How we did it at Kinetix

As always, we recommend making a new template and including it where applicable. This makes it easier to upgrade your customizations in the future if template sets change. And when have they not changed?

There are two template tags that refer to keywords, because both pages and entries can have keywords. The tags are: <mt:EntryKeywords> and <mt:PageKeywords>. This code is included in the all output HTML (pages, entries and archives) so it has to check which context it will be render for, and select the appropriate MT template tags to render. Additionally, The KinetixHosting site uses the Professional Template Set so the code takes into account the special condition of the home page.

<mt:If name="entry_template">
  <mt:IfNonEmpty tag="EntryKeywords">
   <meta name="Keywords" content="<mt:EntryKeywords>" />
<mt:ElseIf name="page_template">
  <mt:IfNonEmpty tag="PageKeywords">
   <meta name="Keywords" content="<mt:PageKeywords>" />
<mt:ElseIf name="main_index">
  <mt:Pages tag="@home" lastn="1">
    <mt:IfNonEmpty tag="PageKeywords">
      <meta name="Keywords" content="<mt:PageKeywords>" />

What, no keywords for the archive pages?

Well, its true. But those pages always represent a collection of entries. What would the correct keywords for the archives be? What do you think should be done in this case?

Today marks the launch of the new KinetixHosting site. Our company is dedicated to providing a variety of well supported web hosting services to your small business. We made this new site with Movable Type and the Universal template set to demonstrate that a small business can easily make a simple web site to communicate effectively with their clientele.

Karla Blue 905

We believe that what you write (what search engines see on your site) is the most important part of a business web site. No matter how many people you can reach with your site, the major search engines reach more. So we think you should concentrate on what you write. The MT platform makes it easy to focus on the words, and the Movable Type UTS provides a simple visual framework to easily drop them in. KinetixHosting provides the servers and fast network platform your company needs to put your content on the web.

Soft Orange Lilly

Over the coming months, we will be using this power to help our customers by creating articles which will allow them to better use our systems and the Movable Type publishing platform. We got started with an article describing the similarities and differences between pages and entries. Another example is our description of a great way to begin to customize the templates by building on a predefined style sheet.

Sunflower Bee

One of the first ways you can begin to make the Movable Type predefined templates look more customized is to change the image on the front page. The selector for which you must change the CSS properties is #homepage-image .

You may save any of the images linked to this post, or make your own 905 × 170 pixel rectangular image. Then you must change to URL of the background image to refer to the image you have selected. This article describes how to write such customize CSS code for MT in an organized way that will allow you to update templates easily in the future.

The other day, on one of MT mailing lists, someone commented on how difficult it was for the average user to edit the CSS files that are created when a style is selected for a blog using StyleCatcher. On this site we have presented an alternative which does not involve editing the files from StyleCatcher, and makes it possible to easily refresh templates without loosing all your customizations.

From CSS2 Specification : Assigning property values, Cascading, and Inheritance

Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.

On our site, we create a new template, and name the output file kinetix.css.

Custom Style Template - Edit

Then in the Style Sheet template we add a line to include our own styles. Since we import our style sheet after the StyleCatcher style sheets, any property values we define will over ride the values from the StyleCatcher files.

@import "/mt_static/themes_base/blog.css";
@import "//universal_black/screen.css";
@import "/kinetix.css";

Another advantage to making changes this way is that if we refresh templates we will only have to add one line to have all our customizations replaced.

In MT4 the publisher has supplied a visual editor, which lets users choose which navigation elements are displayed in the sidebar of a blog or web site. These navigation elements are called widgets, examples include recent entries, recent comments, and a variety of archive listings. There are also very basic widgets included in the default set, including a set and forget Creative Commons widget, and a feed subscription promo widget.

Dragging Widget

By dragging and dropping on the "Installed Widgets" column of the screen, (as shown above) users can control what is displayed in the sidebar of different parts of the site when the site is next published. The default template includes three widget sets, appropriately named: "2-column layout - Sidebar","3-column layout - Primary Sidebar", and "3-column layout - Secondary Sidebar". n.b. In release candidates for 4.2 I see there are some others as well.

Users can create their own widget sets, and insert them into templates using code like:

<$MTWidgetSet name="Name of the Widget Set"$>