Skip to main content

Beautiful typography for the web

There are already many websites that have began using custom web fonts using @font-face to beautify their website.
webfonts example
getfinch.com
Bringing custom fonts to the web increases the range of possibilities for web designers, however it can also be a drawback, if the fonts aren't used carefully.
Firstly, novice designer may try to use too many different typefaces on a single website, which can become distracting and disconnecting. It is important to realize when too much is too much. As a general rule, when designing a website I never use more than three fonts. Usually I select a font font the headlines and another for the content. If required I add a third font for lower level headlines, however I prefer to use different alternations of the same font.
Secondly, by using too many custom fonts, the size of the website increases. Custom web fonts have the drawback of their size. Using three to five custom fonts on a website can increase its weight by about 0.5MB which is not negligible even on broadband connections. An increased load-time reduces the user experience, and may result in a loss of returning users. And we certainly don't want to implement a loader for static, textual websites, for the sake of nicer design.
Enough nonsense and warnings, you probably just want to know how to add beautiful fonts on your site.
As stated in the first paragraph, custom web fonts can be added to a website using CSS3's @font-face.
@font-face {  font-family: Harmless; src: url('Harmless-serif.otf'); }  @font-face {  font-family: Harmless;  font-weight: bold;  src: url('Harmless-Bold.otf');  }
The loaded font can now be called using font-familly:
h1{ font-family:Harmless; }

@font-face works in most modern browsers (Chrome, Firefox, Opera, Safari, IE).
The above snippet would work correctly if there are fonts Harmless-serif.otf and Harmless-Bold.otf on the website hosting server. However, I think it's better to use a custom service specialized at delivering web fonts than hosting the fonts on your own server. These services take care of gzip compression, and many other things. There are many such services, like TypeKit, Fonts.com, Google Font Directory, etc. Most of them offer a free option, but it is often limited in some way or another. For a broader range of features, one has to pay. I have tried TypeKit, Fonts.com and Google Font Directory, but of all three the best free option is the one offered by Google. Their service is of very high quality, free, and since its hosted on Google servers you can be sure that the servers won't be down. The only drawback is that it offers less fonts than the other services, but I have found the offer to be completely sufficient for my needs. To use a custom font from the Google Font Directory, you have to add an additional stylesheet to the website, that specifies which fonts to load.
<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular" rel="stylesheet" type="text/css" >
The above stylesheet will load the regular variant of the font Rock Salt. Using it is simple. Here is an example:
<style>#fontPreview:  font-family: 'Rock Salt', serif; font-size: 30px; } </style>
And the output will look like this:
Web font example
Now you know the basics of using custom fonts on the web, and you can try them on your website. Just remember my previous advice: don't exaggerate.

Comments

Popular posts from this blog

Basic cell counting and segmentation in Matlab

Counting cells manually is a tedious error prone process for humans. Given a large data set of microscopy images this task can be achieved much faster by means of basic computer vision techniques. In this tutorial we will segment cells from an image following a method similar to the one presented by Yongming Chen in 1999. The method uses basic morphological operations and the watershed algorithm to segment the cells. Nowadays better methods for cell segmentation exist. This method was chosen for its simplicity and ease of implementation.

We start with an image of cell-like structures by Anna-Katerina Hadjantonakis and Virginia E Papaioannou.

A = imread('cells.jpg');
We convert the image to grayscale:
I = rgb2gray(A);

To be able to extract the dimmer cells, it is necessary to perform some local contrast adjustments
I = adapthisteq(I);


Objects on the borders can be caused by noise and other artifacts. We can eliminate objects on the borders of the image like this:
I = imclearborder(…

Project planning in a text file

Whenever you work on a project it is important to be able to plan it ahead of time. This holds true for small and big project, from planning a trip to the spa to building a spaceship. The small project plans can be maintained in you thoughts while bigger ones require tools to help you see the big-picture of the project and manage task at a lower level. There are projects which start with a fully prepared plan and projects which pivot overnight, thus invalidating any original plan. For the latter flexibility is very important, and tools like Trello offer a great solution because they can be adjusted to fit your project.

However, it may happen sometimes that the project starts adjusting to the tool or that you still want to maintain a bigger picture of the main points of the project. You may also need to produce a rough development schedule to serve as a long term road-map.

I have prototyped a tool (and defined a workflow) which allows you to plan such projects.

To better understand how…

A more confusing Internet with .brand TLDs

A few months ago, I wrote a post proposing to remove top level domains from the internet, as many people don't understand why we need TLDs. At the time I didn't know either.
Removing TLDs would simplify browsing an possibly increase security by reducing phishing sites that make use of URL similarity to gain visits to potentially dangerous websites, or sites filled with ads.
The ICANN, the body that manages Internet names, has for years been preparing something different but that produces a slightly similar effect than removing TLDs: allowing brands to register their own TLDs. The proposal may soon be approvedhas been approved.
Brands would therefore be able to register their own TLDs. Google could register .google a potentially powerful TLD for their services, like Google Maps: maps.google instead of maps.google.com.
Brand TLD don't improve short urls like google.com, but seem to be effective for use in subdomains.
Registering a .<brand-name> TLD will cost $185K, wh…