Webbrelaterat - Design och resurser för webbdesigners » Typografi

15 tips på snygga webb fonter med CSS @fontface – och hur man gör

Johan — Thu, 05 Nov 2009 12:50:02 +0000

Att använda @font-face regeln är som kanske många vet ingen ny egenskap för CSS3. Det fanns även för CSS2 och funkar också för Internet Explorer 6.0. Dock så läser Internet Explorer inte TTF format så bra så det finns en liten lösning för detta. Besök ttf2eot för konvertera TTF till EOT.

Hur man lägger in detta på din webbsida är en ganska enkelt egentligen. Börja med att Öppna din style.css och droppa denna kod snutt:


@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('Delicious-Bold.otf');
}

Och:

h2 { font-family: Delicious, sans-serif; color:#000;}

Så ska det se ut nåt sånt här i dina h2 taggar:

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Snyggt va! Nu har vi gått igenom enkelt hur vi lägger in inbäddade special fonter på din webbsida. Men vart hittar man häftiga fonter då.. Här kommer 15 rekommenderande fonter av lite olika slag. Notera att dessa fonter går självklart att användas till dina design projekt.

Nevis

Ladda ner fonten här

Miso

Ladda ner fonten här

Delicious

Ladda ner fonten här

JustOldFashion

Ladda ner fonten här

DejaVu Sans

Ladda ner fonten här

Komika Axis

Ladda ner fonten här

Octin College Free

Ladda ner fonten här

Tiza

Ladda ner fonten här

Journal

Ladda ner fonten här

Anonymous

Ladda ner fonten här

Aurulent Sans

Ladda ner fonten här

Bitstream Vera Sans

Ladda ner fonten här

Bitstream Vera Sans

Ladda ner fonten här

Kontrapunkt

Ladda ner fonten här

Kontrapunkt

Ladda ner fonten här

Exempel på otroligt kreativ typografisk design

Johan — Fri, 16 Oct 2009 11:31:20 +0000

En av dom hetaste trenderna det senaste året är typografi och många gånger intrigerat med 3D effekt av nåt slag. Det finns en mängd med bra och kreativa artister men har försökt att samla en blandning av olika typer av typografisk design för inspiration till nästa projekt. En liten bonus i botten om du har missat dom coola videos.

Svenska2

Run, desperation, run

Empty-headed Expressions

Throw Me The Statue Poster

Selfless

DEMEN1

STAY GREEN. GO RED.

Area105

Gold

Children of The Idiom

Tongue

Serial Cut

Adolfo Correa

Typo Composition

Online Interactive Marketing

Signage

Things That We Learn

CSJ89

Toyota: Dependability

Superexpresso

AMI

HappyCentro

Bonus

Jämför, förhandstitta din typografi och generera den till CSS

Johan — Sat, 03 Jan 2009 11:53:55 +0000

Att designa typografi i Photoshop som är försett till en webbplats blir aldrig exakt likadant när du sedan kodar upp din sida i CSS. Därför är dem här sidorna perfekta för din typografi hjälp. Du kan jämföra, förhandstitta, se vilken storlek passar dig, vilken font passar ditt designtema och sedan är det bara kopiera CSS kod snutten in i din stylesheet.