Photo of three iPhone 3 models next to one another. The first shows the home screen, the other two show the back, one in black and one in white. All three phones sport a reflection beneath them.
Strategy

Spotting a Trend | CSS-Tricks


There are tons of smokin’ hot websites out there, with an equal or greater number of talented designers and developers who make them. The web is awesome like that and encourages that sort of creativity.

Even so, it amazes me that certain traits find their way into things. I mean, it makes sense. Many of us use the same UI frameworks and take cues from sites we admire. But every once in a while, my eye starts catching wind of the zeitgeist and commonalities that come with it.

The latest one? Blobby shapes. It’s a fun flourish that adds a little panache, especially for flat designs that need a splash of color or an interesting focal point that leads the eye from one place to anther. I’m sure you’ve seen it. I spent one week collecting screenshots of websites I came across that use it. I certainly wan’t looking for examples; they just sort of popped up in my normal browsing.

I’m sorry if it seems like I’m calling out people because that’s my intention. I actually love the concept — so much, in fact, that I’m considering it on a project! Some of the examples in that gallery are flat-out gorgeous.

After spotting these blobby shapes a number of times, I’ve started to notice some considerations to take into account when use them. Things like:

  • Watch for contrast when text sits on top of a blob. There are plenty of cases where the document background is white and the blob is dark. If text runs through them, it’s going to be tough to find a font color that satisfies WCAG’s 2.1 AA standard for legibility.
  • Tread lightly when mixing and matching colors. One hot pink blob behind a card component ain’t a big deal, but throw in yellow, orange, and other bright colors that sit alongside it… the design starts to distract from the content. Plus, a vibrant rainbow of blobby shapes can raise accessibility concerns. A flourish is just that: a nice touch that’s subtle but impactful.
  • Blobs are good for more than color. Some of the most interesting instances I’ve seen cut images into interesting shapes. It’s cool that we can embed an image directly in SVG and then mask it with a path.
  • Blobs are also good for more than backgrounds. Did you catch that screenshot from Topcoder’s site? They’re using it for tabs which is super funky and cool.

All of this has me thinking about how the websites of today will be looked at by the developers of tomorrow. Remember way back, like 15 years ago, when many sites adopted Apple’s use of reflective imagery? I probably still have some Photoshop muscle memory from replicating that effect so many times.

Photo of three iPhone 3 models next to one another. The first shows the home screen, the other two show the back, one in black and one in white. All three phones sport a reflection beneath them.
Notice the skeuomorphic icons — that was popular too!

Skeuomorphism, bevels, animated GIF backgrounds, long shadows, heroes, gradients, bokeh backgrounds… all of these and many other visual treatments have had their day in the sun. Perhaps blobs will join that club at some point. Perhaps they’ll come back in style after that. Who knows! I just find it interesting to reflect on the things that have inspired us over the last three decades and imagine how the things we do today will be seen through the long lens of time.

It’d be awesome to see other instances of blobby shapes — share ’em if you’ve got ’em!



Source link

r/webdev - The science of User Experience. How to use cognitive biases in the development of modern software products
Strategy

The science of User Experience. How to use cognitive biases …


r/webdev - The science of User Experience. How to use cognitive biases in the development of modern software products

https://keepsimple.io/en/uxcore.html

Good day to all of you,

Recently I published a tool and the article which took me for about 2,5 years of research on cognitive science and behavioral economics. A tool called “UX CORE” consists of 105 hands-on examples of cognitive biases use in modern software development.

Tool link: https://keepsimple.io/en/uxcore.html

Also, I wrote an article that mainly focuses on how understanding brain errors and human behavior patterns can help to provide high-quality user experience (UX) in software production both for mobile and desktop.

Medium article link: https://medium.com/@alexanyanwolf/the-science-of-user-experience-b4ae1314712c

My idea was to lower the threshold for understanding cognitive biases, thereby allowing even non-specialists to know not only the fact of the error but also how this knowledge can be used.

At the moment, information on this topic is very much scattered across Wikipedia and various entertainment portals in the style of “5 brain mistakes that will make you wonder”, however, I decided to move away from the idea of ​​entertainment content, and focus my efforts on showing the topic from a different angle.

I am deeply convinced that in our time, when at every step people talk about “a thousand amazing possibilities”, humanity greatly underestimates the importance of understanding our own mistakes in processing information, which are inherent and will be characteristic of all of us throughout our life.

Share this information with those who you think would find the topic interesting. Help me expand the discussion. Many thanks.



Source link

Screenshot of standard text saying I
Strategy

SVG Title vs. HTML Title Attribute


You know the title attribute? I can do this:

<div title="The Title">
  I'm a div with a `title`
</div>

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…

Screenshot of standard text saying I'm a div with a title. A light gray tooltip is floating above the text next to the cursor that says The Title.

Which, uh, I guess is something. I sometimes use it for things like putting an expanded date or time on an element that uses shorthand for it. It’s a tiny bit of UX helpfulness reserved exclusively for sighted mouse users.

But it’s not particularly useful, as I understand it. Ire Aderinokun dug into how it’s used for the <abbr> element (a commonly cited example) and found that it’s not-so-great alone. She suggests a JavaScript-enhanced pattern. She also mentions that JAWS has a setting for announcing titles in there, so that’s interesting (although it sounds like it’s off by default).

I honestly just don’t know how useful title is for screen readers, but it’s certainly going to be nuanced.

I did just learn something about titles though… this doesn’t work:

<!-- Incorrect usage -->
<svg title="Checkout">
</svg>

If you hover over that element, you won’t get a title display. You have to do it like this:

<!-- Correct usage -->
<svg>
  <title>Checkout</title>
  
  <!-- More detail -->
  <desc>A shopping cart icon with baguettes and broccoli in the cart.</desc>
</svg>

Which, interestingly, Firefox 79 just started supporting.

When you use title like that, the hoverable area to reveal the title popup is the entire rectangle of the <svg>.

I was looking at all this because I got an interesting email from someone who was in a situation where the title popup only seemed to come up when hovering over the “filled in” pixels of an SVG, and not where transparent pixels were. Weird, I thought. I couldn’t replicate in my testing either.

Turns out there is a situation like this. You can apply a <title> within a <use> element, then the title only applies to those pixels that come in via the <use>.

If you remove the “white part” title, you’ll see the “black part” only comes up over the black pixels. Seems to be consistent across browsers. Just something to watch out for if that’s how you apply titles.



Source link

cowboy using computer on barrel
Strategy

Getting Started With MongoDB Using Go


As a Go enthusiast, it’s great to see first class support for MongoDB in the form of an official MongoDB Go driver. We will learn how to use it by building a simple REST API for a good old CRUD-style app!

In this blog, will cover the following topics:

  • Walkthrough the application: CRUD operations.
  • Setup Azure Cosmos DB for MongoDB API.
  • Setup Azure App service and deploy the application to the cloud.
  • Take the REST API for a spin.

To follow along, you’re free to use a MongoDB cluster of your choice (Docker is probably the fastest/easiest option). I will be using Azure Cosmos DB, which is Microsoft’s globally distributed, multi-model database service that supports document, key-value, graph, and columnar data models. It implements the wire protocol for MongoDB making if possible for any MongoDB client driver (including the Go driver) that understands this protocol version to natively connect to Cosmos DB.

The application (API) will be deployed to Azure App Service. It enables you to build and host web apps, mobile back ends, and RESTful APIs in the programming language of your choice without managing infrastructure. You can use it on Linux to host web apps natively on Linux for supported application stacks with support for built-in Docker images for multiple languages such as Node.js, Java, Python etc.

Although we have a Go app in this example, we can still host it on App Service since it supports custom Docker images as well!

Overview

The application is a simple one that exposes a REST API to create, read, update and delete developer profiles with a GitHub ID, blog and skills.

As usual, the code is available on GitHub, but let’s walk through it real quick!

cowboy using computer on barrel

Here is the code layout:

The main CRUD operations are in the crud.go file within the api package. It contains implementation for create, read, update and delete operations.

The Create function gets a handle to the MongoDB collection and marshals the request body (JSON payload) into a struct (model.Developer). The struct is then inserted using the InsertOne function, the error is handled (not shown above) and an HTTP 201 is sent back in case of success.

Here is how the read operation works:

The FindOne function is used with a filter criteria of github_id, which is the partition key for the collection bson.M{githubIDAttribute: githubID}. If found, the result is converted to the struct and returned to the caller.

Fetching all developer profiles is similar

Find uses an empty bson document as a filter in order to list all the documents in the collection and the result is sent back to the caller in the form of a JSON array

FindOneAndReplace is used to update the a specific record. github_id is used as the filter criteria and the passed in JSON payload is the updated record.

Delete is accomplished using FindOneAndDelete which accepts the github_id as the filter criteria for the record to be deleted

Everything is tied together in main.go. It associates the CRUD operation handlers to HTTP routes, starts the server and also sets a graceful exit mechanism

Alright, with that aside, it’s time to provision the required services and deploy the application. Before that, let’s go over some of the pre-requisites

Prerequisites

Setup Azure Cosmos DB

You need to create an Azure Cosmos DB account with the MongoDB API support enabled along with a Database and Collection. You can use the Azure Portal or the Azure CLI.

Use the Azure Portal

Follow these steps:

Use Azure CLI

(The same commands can be used for Azure CLI or Azure Cloud Shell.)

Export the following environment variables:

Start by creating a new resource group under which you can place all your resources. Once you’re done, you can delete the resource group which in turn will delete all the services

Create an account (notice --kind MongoDB)

Create the database

Finally, create a collection within the database

Get the connection string and save it. You will be using it later.


Deploy to Azure App Service

Build a Docker Image for the App

This step is optional. You can use the pre-built image abhirockzz/mongodb-go-app, which I have made available on DockerHub

You can use the Dockerfile to build your own image and push it to a Docker registry (public/private) of your choice

Here is a tutorial which provides an example of how to use Azure Container Registry with Azure Web App Service


Setup Azure App Service

It’s time to deploy our app to the cloud. Let’s quickly do that using Azure App service. Start by creating an App Service Plan which defines a set of compute resources for our web app to run.

Refer to the documentation for details on App Service plans

The plan is associated with an SKU – just like Cognitive Services, you need to choose an SKU (pricing tier) for App Service as well. We will use a small tier (B1) for this example.

Accepted values are B1, B2, B3, D1, F1, FREE, P1V2, P2V2, P3V2, PC2, PC3, PC4, S1, S2, S3,
SHARED

documentation for az appservice plan create

Setup environment variables

please ensure that you use double-quotes ("") around the connection string value

Deploy the application

Add the environment variables as configuration settings required by the application

The API should be deployed in some time. When its complete, go ahead and give it a try!

Test the API

I have used curl for demonstration, but you can use any other tool of your choice

Get the endpoint/host name for the deployed app

Create a few developer profiles

Find a single developer profile using GitHub ID

If you search for a profile which does not exist

Fetch all dev profiles

Delete a developer profile

Confirm again

Once you’re done, you can delete the resource group to delete all the services

That’s all for this blog. I would love to have your feedback and suggestions!



Source link

Getting the Most Out of Variable Fonts on Google Fonts
Strategy

Getting the Most Out of Variable Fonts on Google Fonts


I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts!

Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google Fonts (but you will get a lot more flexibility & performance if you read further!)

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">

Recursive is made for code, websites, apps, and more.
Recursive Mono has both Linear and Casual styles for different “voices” in code, along with cursive italics if you want them — plus a wider weight range for monospaced display typography.
Recursive Sans is proportional, but unlike most proportional fonts, letters maintain the same width across styles for more flexibility in UI interactions and layout.

I started Recursive as a thesis project for a type design masters program at KABK TypeMedia, and when I launched my type foundry, Arrow Type, I was subsequently commissioned by Google Fonts to finish and release Recursive as an open-source, OFL font.

You can see Recursive and learn more about it what it can do at recursive.design

Recursive is made to be a flexible type family for both websites and code, where its main purpose is to give developers and designers some fun & useful type to play with, combining fresh aesthetics with the latest in font tech.

First, a necessary definition: variable fonts are font files that fit a range of styles inside one file, usually in a way that allows the font user to select a style from a fluid range of styles. These stylistic ranges are called variable axes, and can be parameters, like font weight, font width, optical size, font slant, or more creative things. In the case of Recursive, you can control the “Monospacedness” (from Mono to Sans) and “Casualness” (between a normal, linear style and a brushy, casual style). Each type family may have one or more of its own axes and, like many features of type, variable axes are another design consideration for font designers.

You may have seen that Google Fonts has started adding variable fonts to its vast collection. You may have read about some of the awesome things variable fonts can do. But, you may not realize that many of the variable fonts coming to Google Fonts (including Recursive) have a lot more stylistic range than you can get from the default Google Fonts front end.

Because Google Fonts has a huge range of users — many of them new to web development — it is understandable that they’re keeping things simple by only showing the “weight” axis for variable fonts. But, for fonts like Recursive, this simplification actually leaves out a bunch of options. On the Recursive page, Google Fonts shows visitors eight styles, plus one axis. However, Recursive actually has 64 preset styles (also called named instances), and a total of five variable axes you can adjust (which account for a slew of more potential custom styles).

Recursive can be divided into what I think of as one of four “subfamilies.” The part shown by Google Fonts is the simplest, proportional (sans-serif) version. The four Recursive subfamilies each have a range of weights, plus Italics, and can be categorized as:

  • Sans Linear: A proportional, “normal”-looking sans-serif font. This is what gets shown on the Google Fonts website.
  • Sans Casual: A proportional “brush casual” font
  • Mono Linear: A monospace “normal” font
  • Mono Casual: A monospace “brush casual” font

This is probably better to visualize than to describe in words. Here are two tables (one for Sans, the other for Mono) showing the 64 named instances:

But again, the main Google Fonts interface only provides access to eight of those styles, plus the Weight axis:

Recursive has 64 preset styles — and many more using when using custom axis settings — but Google Fonts only shows eight of the preset styles, and just the Weight axis of the five available variable axes.

Not many variable fonts today have more than a Weight axis, so this is an understandable UX choice in some sense. Still, I hope they add a little more flexibility in the future. As a font designer & type fan, seeing the current weight-only approach feels more like an artificial flattening than true simplification — sort of like if Google Maps were to “simplify” maps by excluding every road that wasn’t a highway.

Luckily, you can still access the full potential of variable fonts hosted by Google Fonts: meet the Google Fonts CSS API, version 2. Let’s take a look at how you can use this to get more out of Recursive.

But first, it is helpful to know a few things about how variable fonts work.

How variable fonts work, and why it matters

If you’ve ever worked with photos on the web then you know that you should never serve a 9,000-pixel JPEG file when a smaller version will do. Usually, you can shrink a photo down using compression to save bandwidth when users download it.

There are similar considerations for font files. You can often reduce the size of a font dramatically by subsetting the characters included in it (a bit like cropping pixels to just leave the area you need). You can further compress the file by converting it into a WOFF2 file (which is a bit like running a raster image file though an optimizer tool like imageOptim). Vendors that host fonts, like Google Fonts, will often do these things for you automatically.

Now, think of a video file. If you only need to show the first 10 seconds of a 60-second video, you could trim the last 50 seconds to have a much small video file. 

Variable fonts are a bit like video files: they have one or more ranges of information (variable axes), and those can often either be trimmed down or “pinned” to a certain location, which helps to reduce file size. 

Of course, variable fonts are nothing like video files. Fonts record each letter shape in vectors, (similar to SVGs store shape information). Variable fonts have multiple “source locations” which are like keyframes in an animation. To go between styles, the control points that make up letters are mathematically interpolated between their different source locations (also called deltas). A font may have many sets of deltas (at least one per variable axis, but sometimes more). To trim a variable font, then, you must trim out unneeded deltas.

As a specific example, the Casual axis in Recursive takes letterforms from “Linear” to “Casual” by interpolating vector control points between two extremes: basically, a normal drawing and a brushy drawing. The ampersand glyph animation below shows the mechanics in action: control points draw rounded corners at one extreme and shift to squared corners on the other end.

Generally, each added axis doubles the number of drawings that must exist to make a variable font work. Sometimes the number is more or less – Recursive’s Weight axis requires 3 locations (tripling the number of drawings), while its Cursive axis doesn’t require extra locations at all, but actually just activates different alternate glyphs that already exist at each location. But, the general math is: if you only use opt into fewer axes of a variable font, you will usually get a smaller file.

When using the Google Fonts API, you are actually opting into each axis. This way, instead of starting with a big file and whittling it down, you get to pick and choose the parts you want.

Variable axis tags

If you’re going to use the Google Fonts API, you first need to know about font axes abbreviations so you can use them yourself.

Variable font axes have abbreviations in the form of four-letter “tags.” These are lowercase for industry-standard axes and uppercase for axes invented by individual type designers (also called “custom” or “private” axes). 

There are currently five standard axes a font can include: 

  • wght – Weight, to control lightness and boldness
  • wdth – Width, to control overall letter width
  • opsz – Optical Size, to control adjustments to design for better readability at various sizes
  • ital – Italic, generally to switch between separate upright/italic designs
  • slnt – Slant, generally to control upright-to-slanted designs with intermediate values available

Custom axes can be almost anything. Recursive includes three of them — Monospace (MONO), Casual (CASL), and Cursive (CRSV)  — plus two standard axes, wght and slnt.

Google Fonts API basics

When you configure a font embed from the Google Fonts interface, it gives you a bit of HTML or CSS which includes a URL, and this ultimately calls in a CSS document that includes one or more @font-face rules. This includes things like font names as well as links to font files on Google servers.

This URL is actually a way of calling the Google Fonts API, and has a lot more power than you might realize. It has a few basic parts: 

  1. The main URL, specifying the API (https://fonts.googleapis.com/css2)
  2. Details about the fonts you are requesting in one or more family parameters
  3. A font-display property setting in a display parameter

As an example, let’s say we want the regular weight of Recursive (in the Sans Linear subfamily). Here’s the URL we would use with our CSS @import:

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

Or we can link it up in the <head> of our HTML:

<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">

Once that’s in place, we can start applying the font in CSS:

body {
  font-family: 'Recursive', sans-serif;
}

There is a default value for each axis:

  • MONO 0 (Sans/proportional)
  • CASL 0 (Linear/normal)
  • wght 400 (Regular)
  • slnt 0 (upright)
  • CRSV 0 (Roman/non-cursive lowercase)

Choose your adventure: styles or axes

The Google Fonts API gives you two ways to request portions of variable fonts:

  1. Listing axes and the specific non-default values you want from them
  2. listing axes and the ranges you want from them

Getting specific font styles

Font styles are requested by adding parameters to the Google Fonts URL. To keep the defaults on all axes but use get a Casual style, you could make the query Recursive:[email protected] (this will serve Recursive Sans Casual Regular). To make that Recursive Mono Casual Regular, specify two axes before the @ and then their respective values (but remember, custom axes have uppercase tags):

https://fonts.googleapis.com/css2?family=Recursive:CASL,[email protected],1&display=swap

To request both Regular and Bold, you would simply update the family call to Recursive:[email protected];700, adding the wght axis and specific values on it:

https://fonts.googleapis.com/css2?family=Recursive:[email protected];700&display=swap

A very helpful thing about Google Fonts is that you can request a bunch of individual styles from the API, and wherever possible, it will actually serve variable fonts that cover all of those requested styles, rather than separate font files for each style. This is true even when you are requesting specific locations, rather than variable axis ranges — if they can serve a smaller font file for your API request, they probably will.

As variable fonts can be trimmed more flexibility and efficiently in the future, the files served for given API requests will likely get smarter over time. So, for production sites, it may be best to request exactly the styles you need.

Where it gets interesting, however, is that you can also request variable axes. That allows you to retain a lot of design flexibility without changing your font requests every time you want to use a new style.

Getting a full variable font with the Google Fonts API

The Google Fonts API seeks to make fonts smaller by having users opt into only the styles and axes they want. But, to get the full benefits of variable fonts (more design flexibility in fewer files), you should use one or more axes. So, instead of requesting single styles with Recursive:[email protected];700, you can instead request that full range with Recursive:[email protected] (changing from the ; to .. to indicate a range), or even extending to the full Recursive weight range with Recursive:[email protected] (which adds very little file size, but a whole lot of extra design oomph).

You can add additional axes by listing them alphabetically (with lowercase standard axes first, then uppercase custom axes) before the @, then specifying their values or ranges after that in the same order. For instance, to add the MONO axis and the wght axis, you could use Recursive:wght,[email protected],0..1 as the font query.

Or, to get the full variable font, you could use the following URL:

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap

Of course, you still need to put that into an HTML link, like this:

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">

Customizing it further to balance flexibility and filesize 

While it can be tempting to use every single axis of a variable font, it’s worth remembering that each additional axis adds to the overall files ize. So, if you really don’t expect to use an axis, it makes sense to leave it off. You can always add it later.

Let’s say you want Recursive’s Mono Casual styles in a range of weights,. You could use Recursive:wght,CASL,[email protected],1,1 like this:

<link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,[email protected],1,300..1000&display=swap" rel="stylesheet">

You can, of course, add multiple font families to an API call with additional family parameters. Just be sure that the fonts are alphabetized by family name.

<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900?family=Recursive:CASL,MONO,[email protected],1,300..1000&display=swap" rel="stylesheet">

Using variable fonts

The standard axes can all be controlled with existing CSS properties. For instance, if you have a variable font with a weight range, you can specify a specific weight with font-weight: 425;. A specific Slant can be requested with font-style: oblique 9deg;. All axes can be controlled with font-variation-settings. So, if you want a Mono Casual very-heavy style of Recursive (assuming you have called the full family as shown above), you could use the following CSS:

body {
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Something good to know: font-variation-settings is much nicer to use along with CSS custom properties

Another useful thing to know is that, while you should be able to activate slant with font-style: italic; or font-style: oblique Xdeg;, browser support for this is inconsistent (at least at the time of this writing), so it is useful to utilize font-variation-settings for the Slant axis, as well.

You can read more specifics about designing with variable fonts at VariableFonts.io and in the excellent collection of CSS-Tricks articles on variable fonts.

Nerdy notes on the performance of variable fonts

If you were to using all 64 preset styles of Recursive as separate WOFF2 files (with their full, non-subset character set), it would be total of about 6.4 MB. By contrast, you could have that much stylistic range (and everything in between) at just 537 KB. Of course, that is a slightly absurd comparison — you would almost never actually use 64 styles on a single web page, especially not with their full character sets (and if you do, you should use subsets and unicode-range).

A better comparison is Recursive with one axis range versus styles within that axis range. In my testing, a Recursive WOFF2 file that’s subset to the “Google Fonts Latin Basic” character set (including only characters to cover English and western European languages), including the full 300–1000 Weight range (and all other axes “pinned” to their default values) is 60 KB. Meanwhile, a single style with the same subset is 25 KB. So, if you use just three weights of Recursive, you can save about 15 KB by using the variable font instead of individual files.

The full variable font as a subset WOFF2 clocks in at 281 KB which is kind of a lot for a font, but not so much if you compare it to the weight of a big JPEG image. So, if you assume that individual styles are about 25 KB, if you plan to use more than 11 styles, you would be better off using the variable font.

This kind of math is mostly an academic exercise for two big reasons:

  1. Variable fonts aren’t just about file size.The much bigger advantage is that they allow you to just design, picking the exact font weights (or other styles) that you want. Is a font looking a little too light? Bump up the font-weight a bit, say from 400 to 425!
  2. More importantly (as explained earlier), if you request variable font styles or axes from Google Fonts, they take care of the heavy lifting for you, sending whatever fonts they deem the most performant and useful based on your API request and the browsers visitors access your site from.

So, you don’t really need to go downloading fonts that the Google Fonts API returns to compare their file sizes. Still, it’s worth understanding the general tradeoffs so you can best decide when to opt into the variable axes and when to limit yourself to a couple of styles.

What’s next?

Fire up CodePen and give the API a try! For CodePen, you will probably want to use the CSS @import syntax, like this in the CSS panel:

@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,[email protected],0..1,0..1,-15..0,300..1000&display=swap');

It is apparently better to use the HTML link syntax to avoid blocking parallel downloads of other resources. In CodePen, you’d crack open the Pen settings, select HTML, then drop the <link> in the HTML head settings.

Or, hey, you can just fork my CodePen and experiment there:

Take an API configuration shortcut

If you are want to skip the complexity of figuring out exact API calls and looking to opt into variable axes of Recursive and make semi-advanced API calls, I have put together a simple configuration tool on the Recursive minisite (click the “Get Recursive” button). This allows you to quickly select pinned styles or variable ranges that you want to use, and even gives estimates for the resulting file size. But, this only exposes some of the API’s functionality, and you can get more specific if you want. It’s my attempt to get people using the most stylistic range in the smallest files, taking into account the current limitations of variable font instancing.

Use Recursive for code

Also, Recursive is actually designed first as a font to use for code. You can use it on CodePen via your account settings. Better yet, you can download and use the latest Recursive release from GitHub and set it up in any code editor.

Explore more fonts!

The Google Fonts API doc helpfully includes a (partial) list of variable fonts along with details on their available axis ranges. Some of my favorites with axes beyond just Weight are Crimson Pro (ital, wght), Work Sans (ital, wght), Encode Sans (wdth, wght), and Inter (slnt, wght). You can also filter Google Fonts to show only variable fonts, though most of these results have only a Weight axis (still cool and useful, but don’t need custom URL configuration).

Some more amazing variable fonts are coming to Google Fonts. Some that I am especially looking forward to are:

  • Fraunces: “A display, “Old Style” soft-serif typeface inspired by the mannerisms of early 20th century typefaces such as Windsor, Souvenir, and the Cooper Series”
  • Roboto Flex: Like Roboto, but withan extensive ranges of Weight, Width, and Optical Size
  • Crispy: A creative, angular, super-flexible variable display font
  • Science Gothic: A squarish sans “based closely on Bank Gothic, a typeface from the early 1930s—but a lowercase, design axes, and language coverage have been added”

And yes, you can absolutely download and self-host these fonts if you want to use them on projects today. But stay tuned to Google Fonts for more awesomely-flexible typefaces to come!

Of course, the world of type is much bigger than open-source fonts. There are a bunch of incredible type foundries working on exciting, boundary-pushing fonts, and many of them are also exploring new & exciting territory in variable fonts. Many tend to take other approaches to licensing, but for the right project, a good typeface can be an extremely good value (I’m obviously biased, but for a simple argument, just look at how much typography strengthens brands like Apple, Stripe, Google, IBM, Figma, Slack, and so many more). If you want to feast your eyes on more possibilities and you don’t already know these names, definitely check out DJR, OHno, Grilli, XYZ, Dinamo, Typotheque, Underware, Bold Monday, and the many very-fun WIP projects on Future Fonts. (I’ve left out a bunch of other amazing foundries, but each of these has done stuff I particularly love, and this isn’t a directory of type foundries.)

Finally, some shameless plugs for myself: if you’d like to support me and my work beyond Recursive, please consider checking out my WIP versatile sans-serif Name Sans, signing up for my (very) infrequent newsletter, and giving me a follow on Instagram.





Source link

r/web_design - Out of ideas, need suggestions to improve webpage design
Strategy

Out of ideas, need suggestions to improve webpage design : w…


Hi,

I am implementing a website at the moment and I feel like its design might be a bit too simplistic and just plain. I would very much appreciate some suggestions on how to improve the UI of the website.

Page with products from a given category.

r/web_design - Out of ideas, need suggestions to improve webpage design

Product detail page (not much will be written here, basically only the name of the product and a few sentences about it – that’s according to the client’s requirements)

r/web_design - Out of ideas, need suggestions to improve webpage design



Source link

r/web_design - How do I create this with CSS? A heading with a slightly offset background.
Strategy

How do I create this with CSS? A heading with a slightly off…


I have a grid with 2 columns with a heading and information on the left and an image on the right.

I would like to add a background to the heading that has been offset slightly. I would like to replicate the red heading background in the picture with the “Name Name” in the middle and the red background slightly under it and to the right.

I have made the grid with the heading centered and the paragraph, but I am unable to replicate the heading background with the code.

I made the sketchup on Figma:

r/web_design - How do I create this with CSS? A heading with a slightly offset background.



Source link

r/webdev - Mapping polyline points to intrinsic dimension of image
Strategy

Mapping polyline points to intrinsic dimension of image : we…


I am plotting the polylines on a rendered image of dimensions 1680 x 358 The natural dimensions of the image is 3700 x 790

The polyline points on the rendered images are: 501.9856872558594,142.00601196289062,440.98309326171875,11.000466346740723,376.9803771972656,52.00220489501953,297.9770202636719,136.00576782226562,280.976318359375,262.0111083984375,378.98046875,302.0127868652344,477.9846496582031,276.0116882324219

I want these points to be normalized and stored according to the natural dimensions of the image

r/webdev - Mapping polyline points to intrinsic dimension of image

Please Refer



Source link

r/graphic_design - Feedback on mock logo for a ridesharing company
Strategy

Feedback on mock logo for a ridesharing company : graphic_de…


Last week, I posted my design here of a mock logo for a fake ridesharing company. I incorporated a lot of the suggested edits. Here is my new design. I’ve included info about the company and my thought process below if you missed the first post.

This fake company is not like Uber and Lyft, but rather you can rent your car out to other people which I tried to illustrate in the logo.

Here is the link and I have written out my thought process below: https://imgur.com/a/6tOlGOe

With this company, you can rent your car out to someone else and they will return it when they’re done, similar to Turo. The main logo shape is an outline of a map waypoint. The arrow that loops around is supposed to show that the car is being returned to the same point it was picked up at. And the speedometer in the middle is self-explanatory.

I want the company to be perceived as innovative, approachable, sustainable, and reliable.

Let me know what you think and please share your feedback and critiques with me!

r/graphic_design - Feedback on mock logo for a ridesharing company



Source link