CSS Typography: Examples and Tools In the previous part of this series, we discussed some techniques and best practices for CSS typography. Let’s now delve into the subject further by looking into some case studies, tools, as well as a showcase of excellent CSS typography on the web. This is the third part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography. Case Studies on CSS Typography Tutorials and theories can be great, but nothing says proof like a case study. Southern Savers Case Study: Typography Serif Fonts vs. Fixing Web Fonts, A Case Study Ten Great Free Fonts Cross-Browser: A Case Study in @Font-Face CSS Typography Tools Below is a collection of typography-related tools, with most being geared toward helping you work with CSS typography. Typographic Grid This premade CSS grid by Chris Coyier is composed to a vertical rhythm. Baseline Baseline is a typographic framework that adheres to a baseline grid. Typograph TypeTester
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. 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) 1OpenType comes in two different versions. OpenType PS is a so-called CFF based file format (CFF = compact file format). @font-face Revolution
50 Helpful Typography Tools And Resources Advertisement We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups. To help you improve the typography in your designs, we’re presenting here useful new articles, tools and resources related to typography. You may be interested in the following related posts: Typography: References and Useful Resources The Taxonomy of TypeThis article’s purpose is to help us as designers to distinguish basic properties of types. Typedia: A Shared Encyclopedia of TypefacesTypedia is a resource to classify, categorize, and connect typefaces. Typeface Anatomy and GlossaryMany fonts have abbreviations in their names. Typographic Marks UnknownThere are many typographic marks which are familiar to most, but understood by few. Finding The Right Type
CSS Modal Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment Modal experiment updated for Firefox 10 which has better transform, transition and animation performance. In this experiment, clicking an ‘open’ link pops up a dialogue with a smooth hardware accelerated bounce (where supported). Of course, using images and JS will only make the modal better, and something like hitting ESC to close will never be reproduced in CSS. How to The :target pseudo-selector changes the style of a targeted element. The modal is two parts, one part container, one part content. The content is positioned roughly in the middle and is prettified with a sprinkling of text shadow, border radius, box shadow and gradient. There are two animations, one named “bounce” (scale to slightly larger than normal, then fall back) and another, “minimise”, which act on the content part. Caveats
Script Junkie | Making Sites Shine with @font-face Like many of my web designer brethren, I’m a bit of a typographic geek. And like many web designers, I’ve been frustrated (to say the least) about the historical state of web typography. At first, we were limited to a common, but very small set of “web safe” fonts. Anything beyond those fonts, we had to rely on images. Images for text not only meant we had to create and maintain dozens (if not hundreds) of images, but it introduced accessibility issues. Over time, some clever image replacement techniques evolved to address those accessibility challenges, but we still had the overhead of image creation on top of HTML/CSS development. Hello! During the same time people were struggling with font alternatives, the CSS 2 specification introduced @font-face as a way to link to actual font files via CSS: And then utilize those specified fonts in style declarations: And everyone rejoiced, right? Browser Support Today First, Get a Font Who’s the Host? Self-Hosting FontSquirrel Hosted Picking a Method
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. 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. However, I’ve used this solution several times on Design Shack before so I wanted to switch things up today and use something else. Quick Tips for Combining Fonts Before we get started, there are a few basic rules that you can keep in mind when combining fonts. Use Font Families First of all, when possible, check out the various fonts within a single family. Contrast is King Go Easy The Fonts!
Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces By A. D. Shaikh Summary. This article presents results from a study investigating the personality of typefaces. Participants were asked to rate 40 typefaces (from serif, sans serif, display, and handwriting classes) using semantic differential scales. Introduction While there has been quite a bit of research on the perception of printed type, there has not been a thorough investigation into the perception of onscreen type. Figure 1. The responses reduced down to three factors to describe the typefaces: Evaluative, Potency, and Activity. Potency reflects typefaces that are seen as having strength, power, or force.Evaluative reflects typefaces that are viewed as having value, worth, and importance.Activity reflects typefaces that are considered to be full of energy, movement, and action. The factors were correlated; Potency and Activity were positively correlated, and Potency and Evaluative were negatively correlated. Table 1. Figure 2. [Back to Table 1] Osgood, C. Like this: Like Loading...
10 Mind-Blowing Experimental CSS3 Techniques and Demos-Speckyboy Design Magazine As CSS3 gathers momentum, more and more new techniques and ideas are being published every other day. Each seems to explore exciting never seen before avenues, and ALL push CSSes boundaries ever further away. It really is an exciting time for web design. The post should have been called “The Top 10 Kick-Ass Experimental CSS3 Techniques That Simply Blew My Mind Away! Anyway, here are our favorite CSS3 experimental techniques, And please, please do try this at home, we will really look forward to seeing your results. Our Solar System – An experiment with CSS3 This is a recreation of our solar system using the CSS3 features border-radius, transform and animation. Our Solar System »View the Demo » Star Wars HTML and CSS: A NEW HOPE A couple of years ago, would you have thought that the Star Wars Episode IV opening crawl could be built by using only CSS and HTML? Star Wars HTML and CSS: A NEW HOPE »View the Demo » Pure CSS3 Animated AT-AT Walker from Star Wars Pure CSS3 Spiderman Cartoon
In your @font-face 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.
Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows by Megan McDermott, 19 March 2012 - 2:01pm Web fonts are gaining in popularity now, but they can still be a bit of a challenge to use. Copyright issues often require the use of a third-party font service, which can be risky and expensive.The good news is that all major operating systems come with a variety of fonts that you can use to create your font stacks. This article lists fonts installed with major operating systems and software, shows how those fonts look on that platform, and attempts to suggest fonts with similar appearance and metrics. This is an updated version of the article originally published in November, 2007. Differences from the previous version This version makes several changes and updates to the original version, published in November, 2007: Updated font lists to include different versions of the major operating systems in separate columns. About these tables View the tables Foreign Language Fonts Discussion References: How-to's