Category Archive for: 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 →

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 →

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

Back to Top