Category Archives: CSS

14 Best Online Typography Tools for Web Designers

Style, convert units, search, identify, preview, etc. Lots of resources for working with type on the web:

Since typography is one of the most challenging and important aspects of web design, it\'s important to have useful tools that can make things easier. Here\'s a list of tools that will be a big help in making your typography beautiful, and you won\'t even have to leave your browser.

Baseline — a designer framework by ProjetUrbain.com

082009_baseline
Typographic and design standards on the web

When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attribute — like type leading — kept me from implementing a true grid based approach. I then decided to look back at the basic grid that is used in print: the baseline grid.

The “Light” CMS Trend

Nice roundup of lightweight content management systems and web page editors:

CMSs are beautiful things. Just as CSS allows us to abstract the design away from the markup, a CMS allows us to use a database to abstract the content away from the markup. There are a zillion of them, each with different backend UI\'s and different ways to doing things.

But CMSs are for web people. Even my beloved WordPress can be challenging to train/explain to someone who has no experience working with websites. Perhaps this is the motivation toward a new trend in CMSs I\'m calling “light” CMSs. Each of them attempt to make the task of updating content on a website easier and more intuitive. This is largely at the cost of features. These are for simple, otherwise static websites where updating content is the name of the game.

Introducing Typekit

True font control on the Web? It’s getting closer:

When we started Small Batch Inc. last year, our goal was to explore what\'s now possible on the web. That exploration has taken many shapes: bringing together a community at The Start Conference, working with our friends at Twitter for a few months, and digging deep into data with Wikirank. Now we\'re focusing on an entirely new idea, and we\'d like to share that with you. It\'s called Typekit.

We\'ve been following developments in web browsers very closely, looking for new and smarter ways to build stuff. Last fall, we started seeing renewed interest in linking to fonts via Cascading Stylesheets. While the W3C working draft has been around for years, a new wave of browser support will finally offer designers more control over fonts on the web. A particularly cogent article from John Allsopp, followed by frequent conversations with him, helped us understand that there was a significant opportunity here.

Jeffrey Zeldman’s Web Standards Advisor

“…Jeffrey Zeldman\'s Web Standards Advisor is a $49.99 extension for Adobe Dreamweaver. It includes two major interface

  1. The Web Validator validates your HTML and CSS and verifies the proper use of microformats, including hCard and hCalendar, for single pages or entire websites.
  2. The Web Standards Advisor checks for subtleties of standards compliance in nine different areas—everything from structural use of headings to proper ID, class, and
    element use. Nonstandard practices are flagged and reported in the Dreamweaver Results panel for quick code correction. A full report with more details and suggested fixes is also generated.”

Typechart

“Typechart lets you flip through, preview and compare web typography while retrieving the CSS.

  • Browse typographic styles. (See “anatomy of a style” below)
  • Download CSS
  • Compare Windows (ClearType) rendering with Apple font rendering
  • Each style corresponds with a “style ID”, which allows you to annotate prototypes and retrieve the css while coding.”

One pixel notched corners as used by Google Analytics

“I use Google Analytics, and I noticed that their left nav has an interesting characteristic: instead of each option being boxed in a clickable rectangle, there is a one pixel notch in each corner. It’s not necessarily a curved corner, but it is a little softer than a normal box. I would’ve naturally thought that if someone is going to use background images to create a capsule effect, they would have used anti-aliased images. But upon closer inspection, no background images were used at all.”

Top 12 CSS Frameworks and How to Understand Them | Speckyboy – WordPress and Design

“Most designers would have heard of the term ‘CSS Frameworks\', for those who don\'t know or aren\'t sure, here is a brief description from: Wikipedia:

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

Sounds great doesn\'t it, something that is going to make designing and developing a website that little bit easier. It will take away the repeating of the same old boring stuff and if you write your framework correctly you will be guaranteed your code will meet W3C recommendations. That will leave you plenty of time to design your site, the fun side of the job!”

Blueprint Grid CSS Generator

“This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10 or 16 columns in your design, this generator now enables you that flexibility with Blueprint.”