Letters

De keuze van een lettertype wordt gelukkig niet meer beperkt tot de ‘webveilige’ families. Typekit en in mindere mate de fontlibrary van Google bieden meer opties.

Voor een test met FF Meta Web Pro, Cantarell en daarnaast de oude vertrouwde schreef en schreefloze letter van je browser, bekijk letters.lucbrouns.nl.

Beperkingen tot nu toe

Verfijnde typografie is altijd het struikelblok voor web design geweest. Tot voor kort waren web designers beperkt tot het gebruik van een handvol standaard systeemfonts, de zogenaamde web-safe fonts. Als je meer details of creativiteit in je typografie wilde brengen, moest je je in de technische uithoeken van het internet begeven. Daar bevinden zich technologieën als sIFR en Cufón, die Flash en Javascript gebruiken om gevarieerde typografie te realiseren. Helaas gaat dit vaak gepaard met een slordige technische implementatie waardoor het online klungelig werkt.

http://www.stoerebinken.net/kennisbank/internet/font-face

Welke browsers zijn geschikt voor het gebruik van de @font-face code?

Browser Sinds versie Font formaten
Safari (WebKit) 3.4 OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Opera 10 OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Internet Explorer 5.0 Embedded OpenType (EOT)
Firefox 3.5 OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Web Open Font Format (woff)
Google Chrome 3.0 Beta OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Netscape 4.0 Portable Font Resource (.pfr)

Ontwerpen en bouwen voor mobiel

Artikelen over ontwerpen en bouwen voor mobiel web. Met tussen blokhaken mijn eerste indruk van de kwaliteit van de informatie.

Webtypografie


Aanvulling op het vorige artikel over typografie. Over de basisprincipes, verticaal en horizontaal ritme, verschillen tussen browsers, image replacement en font embedding.

http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/

Viewport

Het deel van de website dat zichtbaar is in je browser.

Heel handig om te controleren wat iemand ziet die met een andere beeldschermresolutie kijkt: Niet iedereen heeft een 30 inch monitor. (of een 19 inch…).
1024*768 pixels is nog steeds een gangbare resolutie. Als je daar rekening mee wilt houden, en dat wil je,  ga dan uit van een viewport (het deel van de website dat zichtbaar is in je browser) van 955*600 pixels.

browsersize.googlelabs

Firebug en / of Safari developer

Firebug is een bijzonder handige add on voor Firefox. Zeker als je met javascript en bijvoorbeeld jQuery aan de slag gaat.

Safari maakt het nog makkelijker: Ga naar Voorkeuren >> Geavanceerd, en activeer “Toon Ontwikkel-menu in menubalk” en klaar is Kees.

Nu kun je bijvoorbeeld zien welke code door je javascript wordt gegenereerd. Dit kan niet in je browser door de paginabron te bekijken.

Schermopname Firebug