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.
Labels:

Comments

  1. AnonymousDecember 5, 2022 at 7:23 AM

    We will fortunately walk you through this 4-step course of – contact us at any time. We may modify the terms of this Promotion or terminate this Promotion at any time. The Bonus might be credited to your account after you could have} successfully made a Claim for the Bonus. Before taking part within the Promotion, please certain that you|just bear in mind to|just ensure you} totally understand the terms and situations under. If you do not understand or do 우리카지노 not agree with the terms and situations under, ought to not|you shouldn't} take part within the Promotion. If you could have} any questions regarding the supply or when you expertise technical points in receiving the Bonus, please contact our assist workers at

    ReplyDelete

Post a Comment

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...
1 comment
Read more

The Increased Addictiveness of Today's Video Games

This is a guest post by Miles Walker, a freelance writer and blogger who usually  compares car insurance  deals over at CarinsuranceComparison.Org. His most recent review looked at the best  car insurance quotes . Video games have always held some addiction, but now more than ever that addiction is growing. People are spending more time than ever playing the games, and game designers are constantly finding new ways keep it that way. Their efforts have a been a complete success, and some games have true addicts, addicts who play 24 hours a week or more. Visual enhancements Video games have come a long way since a certain duo of Italian plumbers started showing up in people's houses in the late 1980s. By leaps and bounds, video game graphics have become alarmingly sophisticated. Each graphical improvement increased a game's possibilities and added more depth to video games. Designers began thriving on this depth, making games with more achievements, unlocks, lev...
19 comments
Read more

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 approved has 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...
1 comment
Read more