Technical Web Typography: Guidelines and Techniques - Smashing Magazine. Advertisement The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs? Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. Creative and Technical Typography I’m not sure these two categories are recognized in the industry but, in my mind, the two main types of typography are creative and technical.
Creative typography involves making design decisions such as which face to use, what mood the type should create, how it should be set, what tone it should have — for example, should it be airy, spacious and open (light) or condensed, bold and tight, with less white space (dark)? We’ll focus on technical type in this article. We’ll learn about: <! Beware! <! The Font-Face Rule and Useful Web Font Tricks - Smashing Magazine. Advertisement The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article. This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator.
If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Web Font Formats EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, and the list goes on. TrueType This format was developed in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. OpenType Microsoft and Adobe teamed up in developing this font format. OpenType fonts with TrueType Outlines (OpenType TT) and OpenType fonts with PostScript Outlines (OpenType PS) @font-face Revolution. 10 Great Google Font Combinations You Can Copy. The average man considers which flavor of Doritos will taste good with his Heineken. The sophisticated man considers which cheese will pair well with his choice of wine. The designer of course considers which two fonts will look great on the same page.
Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. You’ll be able to skim through and instantly grab out selections that you think are appropriate for your projects. The best part? You need only to copy and paste our code to implement these fonts on your site. It’s completely free and there are no downloads required. A couple of times each month, we re-publish one of our popular posts from the archives. Why Google Fonts? The web font game was up in the air a few years ago. Here’s why @font-face wins. Now, within the @font-face world there are many competitors.
Quick Tips for Combining Fonts Use Font Families First of all, when possible, check out the various fonts within a single family. Font Directory. Font comparer. Download Hundreds of Free @font-face Fonts. Visual Walkthrough of @font-face CSS Code. In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough of the @font-face code. In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.
Step 1: Declaring the @font-face rules The first thing we want to do is copy & paste the quick and easy @font-face code into our stylesheet: Yes, it’s a hideous-looking chunk of CSS, but that’s not going to stop us from using it to embed our own custom fonts. First specify a name for your custom font. In this line, we specify both the actual full name of the font and its PostScript name.