background preloader

10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog

10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog
Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS. Think about how difficult sIFR or images get when you want to replicate that typography or typeface over 100 pages powered by a CMS. If you can get beautiful type via CSS it makes this situation very easy and with out compromise. There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. 1. Coudal Partners small headline Larger Headline You may be surprised to find out that the serif font used is… *gasp* times new roman! 2 + 3. Human Sexuality and the Nuptial Mystery Headline Example 3. Seed Conference On Friday, June the 6th 2008 4. 5. 6. 7.

directory: /tex-archive/fonts/Asana-Math The "Asana Math" OpenType font includes all mathematical symbols included in the latest version of Unicode. It includes a MATH t able as an extension to OpenType that would enable selecting glyphs for stretchy operators in a not-so-font-specific manner. It has been successfully tested with XeTeX 0.9997.4 and Word 2007/2010. The font was constructed using glyphs from the pxfonts of Young Ryu while many symbols were designed by the author. Files Down­load the com­plete con­tents of this di­rec­tory in one zip archive (578.1k). asana-math – A font to type­set maths in X∃(La)TeX and Lua(La)TeX The Asana-Math font is an OpenType font that in­cludes al­most all math­e­mat­i­cal Uni­code sym­bols and it can be used to type­set math­e­mat­i­cal text with any soft­ware that can un­der­stand the MATH OpenType ta­ble (e.g., X∃TeX 0.997 and Mi­crosoft Word 2007). The font is beta soft­ware. Type­set­ting sup­port for use with LaTeX is pro­vided by the fontspec and uni­code-math pack­ages.

Create a Letterpress Effect with CSS Text-Shadow The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here! Letterpress – Isn’t that a type of industrial print method? With the recent support of text-transform in Safari and Firefox (3.1+) the effect can easily be created without needing to use any image replacement techniques. View demo Start out by creating a simple background. <! <h1>Line25</h1> <h2>Pure CSS Letterpress Effect</h2> Set up a plain HTML document, then add a few lines of text to test the effect on. Style up the text using the usual CSS properties to edit the size and basic appearance. Now we’re ready to apply the text-shadow property. color: #222; text-shadow: 0px 2px 3px #555; To create the letterpress effect, we need to add a shadow that’s lighter than the colour of the text to ensure the effect works correctly. Simple!

A lire - Color Explorer • Free tools for working with digital colors Home : Belafonte Code A tutorial for good typography in InDesign - Setting up a baseline grid Good clean typography is a fundemental skill of any designer. Most designers believe they have good typography but in my experience it is something which is developed through time and experience. I think we all begin our design lives with a desire to be outrageously creative, and only as we mature, begin realise that simplicity and structure is just as, if not more important. In this article, I will go through some simple steps to acheive good clean well structured typography in Adobe Indesign. The first step is to choose your typefont. Next choose how many columns you want the page to be. So we have set up a grid vertically, the next step will be to set up a horizontal or baseline grid, which all our text will stick to. Start the grid at 10mm in accordance with your borders. Now we will add a heading. I shall now add an introduction paragraph in the exact same way. As you can see, everything is aligning perfectly giving the page a neat structured feel.

cufón - fonts for the people Handwritten Typographers Hit pause for a moment and consider how greatly we – people in the digital age – are indebted to typographers. Almost all of our visual communication is delivered using the products of their craft: newspapers, SMSes, instant messages, emails, web pages, signs, posters, billboards; the list of purposes is endless. In these days where looping strokes have been replaced by keyboard clickety-clack, typographers define the style and tone of our missives. Would you like to be elegant, modern, childish or ... disturbed? There's great power in a typeface, but what's always interested me more than the typeface is the designer behind it – why did they create the typeface? Lately, I've been asking just one question, though. The handwriting of typographers intrigues me because it raises so many questions, big and small: Do typographers exert some extraordinary control of the pen that laypersons don't? Erik Spiekermann spiekermann.com Göran Söderström autodidakt.se Nikola Djurek typonine.com Mark Simonson

A lire - Top 50 Photoshop Web Layout Tutorials from 2011 We all know that Photoshop is the best computer software program for editing digital photos and images.But it is also excellent for web designers.Most of the web designers use Photoshop to design web layouts. Today we have compiled really high quality photoshop layout tutorials from 2011.I’m sure that you will learn many new photoshop techniques from these tutorials. Create an Elegant Photography Web Layout in Photoshop View Tutorial Create a Modern Lab Theme Web Design in Photoshop View Tutorial Create a Consulting Web Layout-business layout View Tutorial How to Design a Trendy WordPress Theme View Tutorial How to Create an Advanced Game Portal Layout View Tutorial How to Create a 3D Portfolio Layout View Tutorial Graphic Design Studio Web Layout Tutorial View Tutorial Create a Gritty Portfolio Layout – Moleskine Layout View Tutorial Create A Dark, Clean Website Design In Adobe Photoshop View Tutorial Design a Sleek, Dark Mobile App Website View Tutorial Design a Professional, Clean Community Blog Theme

CSS Gradient Text Effect Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. View Demos Download Demo ZIP Benefits This is pure CSS trick, no Javascript or Flash. How does this work? The trick is very simple. The HTML markups <h1><span></span>CSS Gradient Text</h1> The CSS That's it! Make it work on IE6 Since IE6 doesn't render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag): This is why we hate IE 6! jQuery prepend version (for semantic lovers) If you don't want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag.

Kristian Madsen Amerikansk skydning (- Spatiering) For meget luft mellem ordene i en tekst linie. F.eks. hvis en tekst har tvunget for- og bagkant, og det sidte ord i en linie ikke kan deles, og dermed flyttes ned i næste linie. Herved tvinges foregående linie ud på hele satsformatet. Antialias Nogle computerskrifter er vektorbaserede – altså opbygget af af linjer og kurver, der forbliver jævne, uanset hvor store de skaleres. Billeder på en computerskærm er pixelbaserede – altså opbygget af små prikker. Hvis man forstørrer et sådant billede, kan man sågar se de enkelte pixels. Antikva Antikvaskrifter er alle skrifter med seriffer. Derfor er antikvaskrifterne delt op i nogle grupper, der baserer sig på bestemte perioder. Renæssance-antikva (gammelantikva) opstod sidst i 1400-tallet, efter man havde trykt bøger med frakturskrift. Barok-antikva (gammelantikva) er en videreudvikling af renæssanceantikvaen. Selvom en skrift er tegnet i 1900-tallet kan den godt klassificeres som en førklassicistisk antikva.

Related:  SEARCH à trierWeb tips & tricksfor:enricllagosteratypecss