background preloader

Technical Web Typography: Guidelines and Techniques - Smashing Magazine

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! <!

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. Here are a handful of studies that can provide you with some real-world insights regarding typography on the web.

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. ssl/ssh multiplexer What is it? sslh accepts connections on specified ports, and forwards them further based on tests performed on the first data packet sent by the remote client. Install me!

25 Fresh Photoshop Photo Manipulation Tutorials to Learn Tutorials March 8, 2011 “Imagination is more important than knowledge. For knowledge is limited to all we now know and understand, while imagination embraces the entire world, and all there ever will be to know and understand.” -Albert Einstein Photo manipulation has become an art form in itself. It allows artists to freely create an awesome piece of art by using stock images and editing them afterwards.

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. And now it’s time to present a beautiful fresh dose of typography-related resources.

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.

Wrapping Long URLs and Text Content with CSS To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags): See demonstration Explanation By default, the white-space property is set to normal. So you might see something like this when trying to force long URLs and other continuous strings of text to wrap: To force long, continuous strings of text to wrap within the width of our <pre> content (or other block-level element, such as <div> and <p>), we need a different value for the white-space property.

Screencast: Django Command Extensions This is a screencast on the Django Command Extensions project. It is one of my favorite third party apps, and it gets installed in every Django environment I work in. It provides a plethora of useful commands, and a couple other little goodies as well. The Latest Trends in Web Design Predicting the evolution of web design is like trying to milk a male goat. Despite ever-changing design trends and techniques, purists and idealists maintain that the principles of great design are timeless. This is true to an extent, but the recent rapid and consistent development of the Internet across many dimensions and in diverse ways has to be taken into account. The Internet has provided us with such a huge platform to innovate and break design barriers; it allows the designer to apply variations and to slightly modify existing trends in order to make their mark. Global access to every kind of tool and technique is at the heart of this creative revolution, allowing designers from all over the world to explore new possibilities. You may be interested in the following related articles as well.

Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces By A. D. Shaikh How to Use Web Fonts and the @font-face CSS Method The days of web safe fonts are about to end thanks to all the great attempts of designers, developers and industry leaders around the world. The good thing in digital production industry is the community of people who are always pushing the boundaries to their limits. Then when it becomes a new standard or convention its pushed forward again by the same community even further.

Related:  A voirweb type