Posts Tagged:web fonts

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, “Lucida Grande”, Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, what that rule is saying is: I’d like to use the Lato font here, please. If you don’t have that, try “Lucida Grande” next. If you don’t have that, try Tahoma. All else fails, use whatever you’ve got for the generic keyword Sans-Serif So in what situation would a browser not have the font you’re asking for? That’s pretty common. There are only a handful of fonts that are considered “web…

Read More →

HTML Email and Accessibility

You love HTML emails, don’t you? As a developer, probably not… but subscribers absolutely do. They devour them, consume them on every device known to man, and drive a hell of a lot of revenue for companies that take their email marketing seriously. But most web developers tasked with building HTML emails merely want to get them out the door as quickly as possible and move on to more interesting assignments. Despite email’s perennial value for subscribers, tight timelines, and a general loathing of the work result in things falling by the wayside; and, just like in the web world, one of the first things to be set aside in email is accessibility. I think we all agree that accessibility is a vital topic. Unfortunately, it’s one that’s ignored in the email marketing world even more than on the web. Accessibility in email doesn’t have to consume a lot of…

Read More →

Websites We Like: May 2017

It’s been far too long since we rounded up some of the most interesting websites out there. But this time we have a diverse round-up of whacky interfaces and beautiful layouts to look at. Let’s dive straight in! Nick Jones’ Portfolio The portfolio of Nick Jones is one of the neatest personal websites I’ve ever seen. As you flip through each page and project that Nick has worked on, the interface rotates and zooms in as you get closer to the end. Not only that but the interface changes color and the tiny animation on the title of each post draws your eye to it. In fact, I think this is the first time I’ve felt comfortable with a designer changing the basic paradigm of mouse scrolling – it somehow feels fluent and natural rather than janky and weird. Hey, they always tell us the cheapest things to animate are…

Read More →

Enforcing CSS Syntax Style (and more!)

I bet you have a style that you write CSS in, for the most part. You like 4-spaces, say. You always have a space after braces and colons. You always put a space after rulesets. You only ever put one declaration on a line, and the only declarations that can be multi-line are when they are big blocks like a gradient or a comma-separated box-shadow. You might take this a little further and codify this. Perhaps you have a team meeting about it and decide on how you want to style code. You write up a guide and make it available for everybody on the team to see. GitHub’s Primer contains “code guidelines” like this. Clean code is important, you say. While style differences in code don’t actually matter in the final output (most of us have build processes in place that compress the code anyway), it matters for day…

Read More →

Tracing the History of CSS Fonts

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presentation. As part of my perpetual obsession with typography, as well as CSS, I’ve been looking into how we got to having more web fonts than we can shake a stick at. What I love about how the W3C does things is that there are always links to previous versions of the specification, all the way back to the first drafts. Although those are missing the full picture of the various discussions and meetings among all the individuals involved in crafting and implementing the specifications, it does offer some clues to how things got to where they are. Tracing the History of CSS Fonts is a post from CSS-Tricks Source: CssTricks

Tracing the History of CSS Fonts

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presentation. As part of my perpetual obsession with typography, as well as CSS, I’ve been looking into how we got to having more web fonts than we can shake a stick at. What I love about how the W3C does things is that there are always links to previous versions of the specification, all the way back to the first drafts. Although those are missing the full picture of the various discussions and meetings among all the individuals involved in crafting and implementing the specifications, it does offer some clues to how things got to where they are. Direct Link to Article — Permalink Tracing the History of CSS Fonts is a post from CSS-Tricks Source: CssTricks

Performance Loading Font Picker Previews

How well a site or app performs on the front-end can be the result of many different factors. If it performs well, the overall user experience is much more likely to be positive. On a recent project, we built a custom “font picker” component for showing the fonts available and displaying each font name with the actual web font itself, so that users could see a preview of the font before making a selection. This poses some interesting performance challenges, one of which is how to load all of these fonts efficiently, so that overall load time is not adversely affected, rendering is not inhibited, and we’re not wasting any unnecessary user bandwidth. Only Load Fonts When Necessary These Google Fonts are only loaded when necessary, when a font picker component is first presented on screen. This helps to reduce the initial load time of the app. However, loading this…

Read More →

You Kinda Can Use Custom Fonts in HTML Emails

And you use them pretty much just like you’d use custom fonts on a website. Jaina Mistry had the scoop on this last year over on the Litmus blog: While web fonts don’t have universal support, here are the email clients where they are supported: AOL Mail Native Android mail app (not Gmail app) Apple Mail iOS Mail Outlook 2000 Outlook.com app Aside from using a JavaScript font loader, which definitely won’t work in email (no email client will be executing JavaScript), ultimately it comes down to @font-face in CSS. So let’s do that. Say we wanted to use Lato in an email, if we can. Go do the normal Google Fonts thing and find the URL for loading Lato. If you just visit that URL, you can see it’s loading Lato over @font-face, and you can totally snag that code: In your HTML template, you’d put that into a…

Read More →

My Increasing Wariness of Dogmatism

A couple of definitions, if you are unclear: 1: Positiveness in assertion of opinion especially when unwarranted or arrogant. 2: The tendency to lay down principles as undeniably true, without consideration of evidence or the opinions of others. 3: … it is applied to some strong belief that the ones adhering to it are not willing to rationally discuss. Hardly a day goes by I don’t see a dogmatic statement about the web. I was collecting them for a while, but I won’t share them as there is no sense in shaming anyone. I’m as guilty as anyone. The dogmatic part comes from the way an opinion is phrased. I feel like people do it sometimes just for emphasis. To sound bold and proud, via brevity. Never use more than 2 fonts on a page, they say. Stop using jQuery, we’re scolded. Never style with ID’s, I’ve extolled. Web fonts…

Read More →

Web fonts, boy, I don’t know

Nothing like a trip through 2G country to get you thinking hard about web performance. Monica Dinosaurescu: Listen: it doesn’t have to be this way. You can lazy load your font. It’s 4 lines of JavaScript. 7 if you’re being ambitious. I still find it fascinating how much we all seemed to hate FOUT, and took steps to fight it, and now are like, “bring back the FOUT!”, and largely have. She suggests async loading, which is good, but remember you can take it further. One-step better is “FOUT with a class” from Zach Leatherman’s guide, and gets fancier from there. Direct Link to Article — Permalink Web fonts, boy, I don’t know is a post from CSS-Tricks Source: CssTricks

We Don’t Serve Your Type Here: A History of Fonts on the Web – Part 1

Back in 1994, websites looked a lot different. Those of you who spent time on the web during that year probably have a good idea of what I’m talking about. If you didn’t spend time on the web that year, or if you weren’t even born yet, allow me to paint you a brief picture:

Back to Top