Posts tonen met het label lettertypen. Alle posts tonen
Posts tonen met het label lettertypen. Alle posts tonen

29 december 2010

Andere lettertypen met Google

Als je met regelmaat websites ontwikkelt  loop je op een gegeven moment tegen het feit aan dat je graag een speciaal lettertype wilt gebruiken. Normaal gesproken heb je slechts de beschikking over een aantal standaard lettertypes die over het algemeen altijd bij een gebruiker aanwezig zijn zoals Arial, Verdana, Tahoma en Times New Roman.

Misschien uit onverwachte hoek is er ook sinds mei 2010 een oplossing van Google, de Google Font Directory. Zodoende kun je met behulp van Google eenvoudig speciale lettertypes gebruiken die werken in vrijwel alle bekende browsers waaronder Internet Explorer 6. De Font Directory bevat allerlei standaard lettertypes, het kan dus wel zijn dat je gewenste font hier niet te vinden is. Er worden wel steeds nieuwe fonts toegevoegd.

Browsers

De browsers die de speciale fonts kunnen tonen zijn:
  • Google Chrome: 4.249.4 en hoger
  • Firefox: 3.5 en hoger
  • Safari: 3.1 en hoger
  • Internet Explorer: 6 en hoger

Lettertypes gebruiken

Het gebruik van een lettertype is bijzonder eenvoudig. Eerst zoek je dus een lettertype uit in de font directory van Google. Na het klikken erop krijg je een voorbeeld te zien op dezelfde manier als dat je een lettertype opent in Windows. De bijbehorende code om gebruik te maken van een lettertype staat op het tabblad 'Get the code'. Dit gaat als volgt:
Als eerste plak je de onderstaande code in het gedeelte van je website (in dit geval het font Reenie Beanie).

In je CSS bestand definieer je vervolgens de koppen, bijvoorbeeld de H1.
h1 { font-family: 'Reenie Beanie', arial, serif; }

En dan ben je eigenlijk al klaar en kan de verdere opmaak van de tekst bepaald worden in het CSS bestand. Zodoende wordt het dus bijzonder eenvoudig om specifieke lettertypes te gebruiken. Je bent niet beperkt tot één lettertype maar je kunt meerdere lettertypen aanroepen en gebruiken. Lettertypes worden dan gescheiden door een |.

CSS 3 features zoals text shadows worden overigens ook ondersteund.
De onderstaande regel is bijvoorbeeld voorzien van een speciaal lettertype (ook selecteerbaar). Het voordeel van de bovenstaande manier is dat het eenvoudiger te implementeren is vergeleken met sIFR of Cufon maar beperkt is qua lettertypen.
Lorem Ipsum
Bron:websonic

7 augustus 2010

ontwerp je eigen lettertype



Het is mogelijk een nieuw lettertype te ontwerpen (bijvoorbeeld via yourfont.com). Vervolgens kun je (via de selecties: start, configuratiescherm, vormgeving en thema’s, lettertypen) dit lettertype installeren op je pc.
Wil je nog meer uitproberen kijk dan eens naar de (Windows) High-Logic Font Manager die je 30 dagen gratis kunt gebruiken. Het uiteindelijke resultaat van mijn eigen lettertype valt me een beetje tegen. Het ontwerpen van fonts blijft een vak apart! Daarom heb ik me maar ingeschreven voor de digitale nieuwsbrief van www.yourfont.com. Daarmee ontvang ik 2x per jaar gratis een nieuw lettertype kant en klaar in de mailbox.




6 augustus 2010

Comic Sans


Ik durf het bijna niet meer toe te geven na het zien van onderstaande video. Mijn favoriete (gratis te gebruiken) lettertype is Comic Sans. Niet voor hele lappen tekst maar gewoon als vriendelijk lettertype voor informele tekst.
Maar ik kwam er vandaag achter dat er ook echt Anti-Comic-Sansers zijn.

8 richtlijnen voor de vormgeving van tekst in een blog

Als je meer wilt weten over dit lettertype en zelf ook de video (hij duurt 8 minuten) wilt bekijken klik dan op meer lezen hieronder

LinkWithin

Related Posts Plugin for WordPress, Blogger...

rubrieken

404-pagina (3) adobe (1) afbeeldingen (3) akismet (2) app (1) apple (3) archief (2) archiefpagina (1) backgrounds (1) backup (4) banner (2) bic (1) bloggen (2) bouw website (5) breadcrumbs (1) browser (1) brushes (1) buitengewoon verlof (2) checklist (1) clickable afbeeldingen (1) codepress (1) communicatie (1) contactform (1) controle website (2) cookies (1) CreArtions (1) creative suite (1) css (2) cursus (7) custom file editor (1) DataCT (2) design (6) designerdigitals (1) digitaal briefpapier (3) DIV (1) domeinnaam (3) drukwerk (8) DVD (2) e-books (1) e-commerce (1) email (2) Email newsletter (1) envato (1) error-pages (1) feedburner (1) feeds (1) Filezilla (1) Flash (2) Flickr (2) fonts (14) footer (4) formulier (1) foto (5) foto's (2) foto's uitwisselen (1) fotocollages (1) frameworks (1) free downloads (1) functies (1) gadget (1) gadget. (1) gebruikers (1) gedachtenspinsels (5) gemeente Harderwijk (1) generators (1) Genesis (8) Gmail google (1) google (6) google analytics (2) google sitemap (1) haken (2) handige tips (19) handige websites (23) header (2) héél makkelijk (1) helpdesk (1) het begin (1) homework (1) hooks (2) hosting (5) htaccess (3) html-code (1) humor (25) i-cloud (1) i-work (1) iban (1) iBooks (1) iconen (1) id (1) ideal (2) iMac (1) inschrijven nieuwsbrief (3) Internet Explorer (2) ipad (1) iphone (2) iPod (1) ipp (1) iTunes (1) joost (1) kaart (1) keynote (1) kleuren (5) kruimelpad (1) landingspagina (1) leesvoer (4) let op (1) lettertypen (4) leuke websites (3) Lifehacking (6) LinkedIn (1) links (2) literatuur (2) logo (6) luchtig leesvoer (18) mac (12) Mad Mimi (1) MailChimp (2) MALVA (7) marketing (1) metatags (3) muziek (2) navigatie (1) nederlands (1) nederlandstalig (2) new release (1) nieuwsbrief (1) Office 2011 (1) ontwerp (8) ontwerp bord (1) ontwerp kadobon (1) ontwerp logo | visitekaartje (8) Op Vlie (9) opdrachten (1) open hook (1) opleveren website (4) origineel (1) os-commerce (1) overzicht (2) permalinks (1) photobewerki (1) photoshop (31) php (1) php code (1) picasa (2) plugin (50) plugin (2013) (1) Plugin WordPress Seo en WP Cache (1) portfolio (15) poster (3) posterino (2) presentaties (2) prezi (1) Pronamic (1) publisher (1) Punchcut (2) redirect (2) responsive design (1) rss (2) SEO (17) sidebars (1) sitemap (1) sitemaps (1) sjabloon (1) snelheid (1) social media (8) software (1) spam (1) spelling (3) spreuk van de dag (3) stockfoto's (1) taal (54) tekstverwerking (1) Theme THESIS (32) themes (8) thesis (3) tip (1) tips (7) tips en trics (36) TITAN (3) titeltag (1) top-design (2) top-designer.nl (6) tuts (2) Twenty Eleven (1) twitter (2) update (1) upgrade (1) video (1) visitekaartjes (3) webdesign (1) webshop (3) website bouwen (15) webteksten (5) webwinkel (3) widgetized (1) widgets (1) wist je dat (2) WOO (2) wooCommerce (1) WordCamp NL (1) wordpress (34) wordpress 3.0 (3) WordPress 3.2 (1) wordpress 3.3 (2) WordPress mediabeheer (1) WordPress mobiel (1) WordPress plugin (23) WordPress tv (1) WordPress Twitter (1) WordPress update (1) wordress 3.3 (1) wp 3.0 (1) WP Page Numbers (1) wp paginanrs. (1) WP plugin (1) wp print (1) you tube (1) zoekbalk (1)