Blog

Custom typography on the web

Jun 2nd, 2014 by Max Tokman

Online presence is always a part of the overall branding strategy and as such, follows the same typography guidelines.  As we all know by now, web typography presents a unique set of challenges; fortunately, for every challenge there’s a solution.  The technical solution is driven by larger decisions - generic free fonts vs. custom licensed typography, open source usage vs. one time license vs. ongoing license fees.  

Once the hurdle of business decision is cleared, technical implementation is straightforward: fonts are either embedded in the page or linked from an external font service.  External font services such as @font-face, Google fonts, or webtype.com offer custom typography that can be connected using a simple “link” tag, as in:

<link href='http://fonts.googleapis.com/css?family=Croissant+One' rel='stylesheet' type='text/css'>

The benefit of using external font service is gaining immediate access to ready source of commercially developed fonts.  Drawbacks include potential licensing fees and the possibility of font service being temporarily unavailable, in which case custom fonts will default to standard fonts.  There’s also a slight delay in load time as fonts are being downloaded from external server, which may or may not be noticeable depending on user’s connection.
 

Embedded fonts come in a variety of formats, majority of browsers except Internet Explorer supporting OTF and TTF file formats.

IE( including 10) supports ЕОТ
IE >= 9  supports WOFF
FF >= 3.6  supports WOFF, OTF, TTF
Safari supports OTF, TTF, SVG
Chrome supports OTF, TTF, WOFF
Opera supports OTF, TTF, SVG

Embedded fonts provide a more stable viewing experience, without reliance on external font services.  However, converting desktop fonts to web-compatible formats involves additional labor costs which may or may not be justified, depending on brand’s flexibility on web font usage and potential substitutions. At the end of the day, the choice is driven by a compromise between brand’s typography requirements, costs, and reliability.
 

If you decide to go with embedded fonts option, there are online services that perform the conversion:

1) http://www.fontsquirrel.com/tools/webfont-generator   (to  .eot, .ttf, .svg, .woff)

 2) http://onlinefontconverter.com/ - (to/from: .pdf, .dfont, .eot, .otf, .pfb, .tfm, .pfm, .suit, .svg, .ttf, .pfa, .bin, .pt3, .ps, .t42, .cff, .afm, .ttc, .woff)

 3) http://www.freefontconverter.com/ (from: .pfa, .pfb, .pt3, .sfd, .ttf, .otf, .otb, .t42, .cef, .cff, .gsf, .ttc, .svg, .ik, mf, .dfont, .bin, .suit, .bdf     to:  .otf, .ttf, .svg, .woff,  .ps, .pfa, .pfb, .pt3, .cff, .t42) 

 4) http://www.fontconverter.org/    (to:  otf, ttf, fon, pfb, pt3, dfont, afm)

 5) http://www.font2web.com/

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Posting to Facebook and LinkedIn from your site

May 29th, 2014 by Max Tokman

Having the best site on the web is no guarantee it will be found and appreciated.  You have to actively promote it and one of the best ways to increase the site’s visibility is to drive traffic through major social networks, such as Facebook and LinkedIn.  However, that calls for increased marketing efforts,

Once a divider, Adobe Air will build up an app-based Internet

Jul 1st, 2011 by Max Tokman

We all remember when the Internet ran on Flash. It was exciting, it was interactive, it made us forget that the colors and sounds we were presented with were ultimately the same ones and zeroes of script compilers and logic engines. Flash gave art a seat at the web design table as well as expanding the functions of wha