PUBLIC MARKS from sbrothier with tags css & typography

Further, very few implementations take into account what are known in typography as descenders, or glyphs which extend below the text baseline. These include letters like g, j, p, q, y, and in some typefaces, numerals like 3, 4, 5, 7, and 9.

Today, designer Val Head builds a demo to show us how to create great looking typography for all screen sizes and resolutions without a dev’s expert assistance and without a lot of complex code.

Now in Webflow you can create beautiful interactions for your responsive website without writing a line of code. Learn More or Start Designing.

The simplest way to turn on kerning is to use text-rendering: optimizeLegibility;, which, depending on the browser, will also enable other OpenType features. Like I said yesterday, though, that this isn’t an official CSS property and in theory could become unsupported at any time. It’s also been known to cause a few issues.

Today we want to share one possible solution to the circle hovering problem. We'll create a plugin that will take care of the 'mouseenter', 'mouseleave' and 'click' events to be triggered only on the circular shape of the element and not its bounding box.

CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping in Chrome 20 (canary at the time of this writing). And not behind a flag, it just works. Production usage isn't quite there, but it will be soon enough.

Modern Pictograms is a typeface for interface designers and programmers. Designed in early 2011 for the Flatfile Wordpress theme, the pictograms stay sharp when used large or small. Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to embed them right in your Web page. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.

The web’s most beautiful typefaces Try typefaces from the web’s best known web font services. Design with real content Kiss goodbye to Lorum Ipsum. Get real web content in place, fast. Create HTML & CSS in the browser Quickly get to a working, standards-compliant prototype.

The -moz-font-feature-settings CSS property permits control over kerning, ligatures, alternates, real small caps and stylistic sets to name just a few.

Internet Explorer 9 now supports WOFF, and the Friends of Mighty have joined forces to explore typographic possibilities on the web.

Paravel has just wrapped up an exciting secret project with three of the web’s most talented designers: Jason Santa Maria, Frank Chimero, and Naz Hamid. These designs are epic, like 18,123px epic. Working with these guys was a complete joy. There were a few fun development challenges and – as you might expect from these gentlemen – a lot of fancy typography work in the delivered PSDs.

Web FontFonts are high quality, screen-optimized fonts designed specifically for web use. Learn more » FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.

The demos below show how the latest version of Apple’s Safari web browser, new Macs, and new Apple mobile devices all support the capabilities of HTML5, CSS3, and JavaScript. Not all browsers offer this support. But soon other modern browsers will take advantage of these same web standards — and the amazing things they enable web designers to do.

Now that web fonts are supported in Firefox 3.5 and 3.6, Internet Explorer, Safari, Opera 10.5, and Chrome, web authors face new questions: How do these implementations differ? What CSS techniques will accommodate all? Firefox developer John Daggett recently posted a little roundup about these issues and the workarounds that are being explored.

Because web type renders differently with only subtle CSS adjustments, seeing it exercised in a variety of ways can help web designers typeset—and also help them decide which typefaces to purchase for their projects. Read more at A List Apart.

Typekit Makes Sites Pretty. That should be enough, but there’s so much more! In this episode, Ryan Carver and Greg Veen join us from Small Batch Inc., the makers of Typekit. Typekit aims to solve all of the problems that currently prevent web designers from using commercial typefaces in their designs. Every major desktop browser will support linking to custom fonts from within your site’s CSS using @font-face. You can then use these fonts on your web site without users having to install the fonts on their system beforehand. => This really is going to change web design

With the Typekit service now you can embbed fonts with a few clicks using simple CSS mark-up, without having to handle any font file.

If your web browser is up to snuff, you’ll see Graublau Sans Web for headings, subheads, and appropriate examples in this specimen page. If not, refer to CSS @font-face support. Please note: IE supports @font-face via fonts converted to .EOT, but because conversion is a hassle I have skipped it in this example. ↩

veryone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set: 1. No plug-ins required – it can only use features natively supported by the client 2. Compatibility – it has to work on every major browser on the market 3. Ease of use – no or near-zero configuration needed for standard use cases 4. Speed – it has to be fast, even for sufficiently large amounts of text And now, after nearly a year of planning and research we believe that these requirements have been met.

Led by Richard Rutter Browser support for the typographical aspects of CSS is gradually increasing. Things are on the up. Richard will be trouncing the myth of web-safe fonts, demonstrating how to go beyond bold, detailing the technicalities of font embedding and exploring the commercial and ethical minefield therein. The introduction of font embedding in particular is a long-awaited step in the right direction. However it brings with it a host of complications; technical, ethical and aesthetic. This session will explain all.