search

TypeNetwork / variable-fonts-info-site

A brochure website to demonstrate the benefits of variable fonts
https://variablefonts.typenetwork.com
Apache License 2.0
36 stars 12 forks source link

Topics/Styles/after variables... #63

Open dberlow opened 5 years ago

dberlow commented 5 years ago

This is a first cut at the idea.

  1. we go through the stylistics of the registered axes minus italic/slant for now.
  2. we go through other axes, like decovar's
  3. we introduce the concept of blends 4.we rehash all the design spaces we just explained with images and values for the blends.

pdf and rt docs enclosed, we can meet on this if you wish.

(please have patience with the pdf, which separates the red heading from each of the last 4 the illustrations, adding space, sometimes a whole page).

Also, the examples coming along to show this, are most of the answer to issue 62.

Topics:styles:after variables rewrite.rtfd.zip

ghost commented 5 years ago

The RTF looks great!

@litherland can put the text in and edit.

@dberlow do you want @clairelindsey to work over the illustrations? Anything to be interactive in these?

litherland commented 5 years ago

@litherland can put the text in and edit.

Okay, I’ve dropped the new text in. Before I start editing, I’ll wait to hear if this is the final version, or if it’s still in the process of being revised.

dberlow commented 5 years ago

I copied the site's text into here: https://github.com/TypeNetwork/variable-fonts-info-site/blob/master/topics/styles/variations.md

And I edited and left a note on completion.

The content should now be pretty good at informing the design of the illustrations

Anything better interactive can be. I thought of the part on Decovar having some, but that that illustration and part of the text is a side show to the main point of the text, it better should remain simple.

Thanks.

litherland commented 5 years ago

Thanks. I had already dropped this content in last night (gh-pages branch, so it’s pushed to the site). Sounds like this is final, so I’ll go ahead and edit this new version.

dberlow commented 5 years ago

If by “final”, you mean I’m done until others have at it, yes.

Thanks.

On Feb 20, 2019, at 7:44 AM, litherland notifications@github.com wrote:

Thanks. I had already dropped this content in last night (gh-pages branch, so it’s pushed to the site). Sounds like this is final, so I’ll go ahead and edit this new version.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

clairelindsey commented 5 years ago

Hi David, here are some sketches for the illustrations on this page.

VFBro-Instance-Illos-022819.pdf

You'll see that we had to adjust the minimum width to work visually/ avoid breakage. But, let us know what you think, or have other requests for the safe zones or in general :)

litherland commented 5 years ago

DB’s revised text has been edited.

dberlow commented 5 years ago

I think the figure numbering got off on these as (opsz) should have it's own illustration,

and figure 4 has styles that are obviously falling apart on the l-left?

So figure 4 should be of; width, wght and optical size,

A fifth, Figure 5, then should be about micro adjustments of a single style, let's say the default, using parametric axes, to make little adjustments to xtra and yopq, and ytlc?

Thanks.

On Thu, Feb 28, 2019 at 1:09 PM litherland notifications@github.com wrote:

DB’s revised text has been edited.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/63#issuecomment-468376816, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3ajrf_n7a78FEP0RgGlkhUKB1a9G4Iks5vSBtmgaJpZM4bDAdw .

clairelindsey commented 5 years ago

Thank you so much for the feedback and we'll work back into this.

clairelindsey commented 5 years ago

Hi David! Here's the updated visuals. Let me know what you think or if you want to hop on a hangout to go over anything.

One question, do you imagine figure 3 is interactive? Or just static?

Fwiw, I added an extra page that shows all the values that went into figure 5 to make sure its inline with what you were thinking.

VFBro-Instance-IllosR.pdf

Thanks!

dberlow commented 5 years ago

Styles Illustration db.pdf Hey Claire,

Here's the commented pdf for the topic/styles/after vars.

Please also see latest Text, on repo, and Chris, please update site with that text.

Let me know if this is clear.

Summary; It should become more dense with "Aa" from use of modular build up. Decovar illustration and text moved to end.

thanks.

clairelindsey commented 5 years ago

Hey David, thank you. Digging into the pdf now and will let you know if I have further questions.

ghost commented 5 years ago

I've brought over the text from the master branch into the gh-pages website branch.

clairelindsey commented 5 years ago

Hey David, here's the updated illustrations for this page. Lmk what you think :)

VFBro-Instance-IllosR3-031519.pdf

dberlow commented 5 years ago

Hey Claire,

Looking better, Getting closer.

  1. The two with 4 rows should have said 5. So there is an odd number of rows in each.
  2. And there is a middle row that aligns with the default.
  3. And rows must be distributed so all the rows near dots, are the same align,ent to the dots.
  4. Please keep fig 1 the same general scale as the others, not larger than the largest of figs 2 and 3.

Let me know if questions.

On Mar 15, 2019, at 1:34 PM, clairelindsey notifications@github.com wrote:

Hey David, here's the updated illustrations for this page. Lmk what you think :)

VFBro-Instance-IllosR3-031519.pdf

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

clairelindsey commented 5 years ago

Thanks David! Diving back in now. Will let you know if I have questions.

clairelindsey commented 5 years ago

Hey David! Hows this:

VFBro-Instance-IllosR4-031919.pdf

dberlow commented 5 years ago

Hey Clair,

This is real close. In what form is the source of this file?

On Mar 20, 2019, at 9:15 AM, clairelindsey notifications@github.com wrote:

Hey David! Hows this:

VFBro-Instance-IllosR4-031919.pdf

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

clairelindsey commented 5 years ago

Woohoo! Thats great.

I'm using adobe illustrator for these. Let me know if you'd like to take a look at the file or anything :)

dberlow commented 5 years ago

This has to go to web code now Chris, so I can finish with you.

The pdf enclosed shows my final comments on this and I'll provide fig 4 when the code for this is up.

The instructions in the pdf are a bit cobbled together from different versions, but that's because things kept changing.

the whole piece is a simple three-stage illustration- made of the one part showing one axes, the next part showing two axes, and the third showing three axes.

I as unable to get one axes that looks like part of the two-axes figure, I've clearly indicated that, I hope, in the pdf.

Aa don't sit on top of the dots and lines, they are to sit above both, as indicated.

I know what the content says, that the default is Not in the middle of the width axis, which only gets narrower, I indicate that change.

The labels that are in some of the figures should be in all of the figures, I show exactly which ones are where.

Any questions, let me know today. Topic:styles:after.pdf

ghost commented 5 years ago

If we can keep these as SVGs it would save some time… HTML/CSS are not great constructing these line-drawing kind of things. Or perhaps a halfway solution where the letters are real but the grid/space lines are SVGs layered underneath.

ghost commented 5 years ago

Do you envision Fig 5 as being interactive? If so, the pointy end would in fact need to be a tight circle of slider-ends, I think, since if they all start at default, you'd only be able to access the top one. On mobile it's super hard to actually hit a slider gnubbel (my favorite name for the "handle", an Adam Twardoch term) with your finger on the first try anyway, and if they're even close to each other it will probably be almost impossible to hit the right one on the first try.

image

ghost commented 5 years ago

(Also @clairelindsey) I'll note that the illustrations are reversed in Fig 5. (and presumably the illustration should actually match the shown axes/ranges)

ghost commented 5 years ago

I tinkered with the PDF in Illustrator. Is this basically it @dberlow? image

ghost commented 5 years ago

Here's my version. VFBro-Instance-IllosR4-032019.pdf

dberlow commented 5 years ago

Way over time and budget for one set of illustrations, I’m just going to cut this figure 5 illustration from the project and edit the text to point at Decovar.

Thanks.

On Mar 20, 2019, at 6:00 PM, Chris Lewis notifications@github.com wrote:

(Also @clairelindsey) I'll note that the illustrations are reversed in Fig 5. (and presumably the illustration should actually match the shown axes/ranges)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

dberlow commented 5 years ago

A few corrections and a change.

On Wed, Mar 20, 2019 at 10:13 PM Chris Lewis notifications@github.com wrote:

Here's my version. VFBro-Instance-IllosR4-032019.pdf https://github.com/TypeNetwork/variable-fonts-info-site/files/2990664/VFBro-Instance-IllosR4-032019.pdf

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/63#issuecomment-475092732, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3ajhkO9w7M0Qm3aDF-GH8RaBlGmYWhks5vYuqugaJpZM4bDAdw .

dberlow commented 5 years ago

Topic:styles:after Chris.pdf file

ghost commented 5 years ago

First three figures are in. I just noticed the DEFAULT at the bottom should be SMALLEST. Other than that I think it's pretty close.

ghost commented 5 years ago

Fixed that label.

dberlow commented 5 years ago

Please size the first figure as requested, not larger than others. Topic:styles:after please.pdf

ghost commented 5 years ago

Done.

dberlow commented 5 years ago

We lost “widest” label in last 4 grids.

dberlow commented 5 years ago

Here is a sketch and animation fro figure 5 of this series.

It goes into the topic after: "For example, in Amstelvar, Font Bureau added axes to adjust for the technical requirements of both composition and output, and to bring fluidity to these axes in the same way a weight or width axis brings fluidity to weight and width, respectively. Amstelvar illustrates both a wide range of widths and weights and axes within the type to control specific details of the letters, and/or the white space the letters enclose and occupy."

Let me know if questions.

thanks Topic:styles:after fig 5 B.pdf

ghost commented 5 years ago

For the animation, do you want just the Aa doing its thing, or do you want a visual indication of the axes that are being changed?

ghost commented 5 years ago

Widest label is in

dberlow commented 5 years ago

Thanks. How do you feel about fig. 5 and it’s proposed animation?

ghost commented 5 years ago

I had a question about that, do you just want Aa by itself animating, or do you want some of the red "legend" around it also indicating how we're navigating around the space?

dberlow commented 5 years ago

I don’t know. I imagine something like the nuclear power sign with three or between neutrons but maybe that’s just insane

On Apr 10, 2019, at 4:48 PM, Chris Lewis notifications@github.com wrote:

I had a question about that, do you just want Aa by itself animating, or do you want some of the red "legend" around it also indicating how we're navigating around the space?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

ghost commented 5 years ago

First draft of the stage play is in, but there is something off about the parameters. This is the "base" setting, which I got by setting opsz/wght/wdth in typetools and copying the parametric values.

image

And those parameters:

font-variation-settings: /* "opsz" 14, "wdth" 100, "wght" 400, "PWDT" 402, "PWGT" 88, */  "XTRA" 211, "XOPQ" 197, "YTLC" 518, "GRAD" 100, "YOPQ" 48;

(Note I upped the base GRAD from 88 to 100 because 88 is already at the bottom of the range.)

dberlow commented 5 years ago

You have lost me. The animation’s stage play ? begins at STAGE PLAY 2 SEC. opsz 15 wdth 85 wght 750 No changes to any of the other axes.

On Apr 12, 2019, at 5:48 PM, Chris Lewis notifications@github.com wrote:

This is the "base" setting

ghost commented 5 years ago

That's that it's supposed to be, but in order to animate the parametric axes, I need to specify them, and when I do, I get that crazy thing above. This might be a problem with the way typetools is showing the values... I'll keep poking at it.

dberlow commented 5 years ago

Alos, As I think I’ve pointed out, there is a typetools bug at the default, 14 pt, and it’s never been fixed.

If you cruise the opsz axis you see it, it’s been there for a while.,

I use 15 or 13 for demos because of that.

This demo is set at 15, and the variations are all small and should not break, I looked

Thanks. . On Apr 12, 2019, at 5:48 PM, Chris Lewis notifications@github.com wrote:

First draft of the stage play is in, but there is something off about the parameters. This is the "base" setting, which I got by setting opsz/wght/wdth in typetools and copying the parametric values.

And those parameters:

font-variation-settings: / "opsz" 14, "wdth" 100, "wght" 400, "PWDT" 402, "PWGT" 88, / "XTRA" 211, "XOPQ" 197, "YTLC" 518, "GRAD" 100, "YOPQ" 48; (Note I upped the base GRAD from 88 to 100 because 88 is already at the bottom of the range.)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

dberlow commented 5 years ago

I don’t have time if that’s a long debug and am happy to use 15 pt.

On Apr 12, 2019, at 5:56 PM, Chris Lewis notifications@github.com wrote:

That's that it's supposed to be, but in order to animate the parametric axes, I need to specify them, and when I do, I get that crazy thing above. This might be a problem with the way typetools is showing the values... I'll keep poking at it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

ghost commented 5 years ago

Added opsz 15 to the stage play and it's better! I'm curious where this bug is coming from as it's happening in this brochure too, so it's not specific to typetools.

ghost commented 5 years ago

Indeed, that seems to be a Safari bug. When opsz is at its default value (as defined in the font), the browser overrides it to match the font-size, even if it's explicitly specified. I'll report the bug to apple.

dberlow commented 5 years ago

I have to play that back... When opsz is set to 14 (as defined in this font), the browser overrides that opsz value to match the font-size’s opsz?

On Apr 12, 2019, at 6:15 PM, Chris Lewis notifications@github.com wrote:

Indeed, that seems to be a Safari bug. When opsz is at its default value (as defined in the font), the browser overrides it to match the font-size, even if it's explicitly specified. I'll report the bug to apple.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

ghost commented 5 years ago

Yeah, say if the font-size is 64pt (as in typetools H1), when opsz hits 14, Safari ignores the CSS and shows it as opsz 64. I've sent this to my contact for these things, Myles Maxfield on the WebKit team. Chrome and Firefox don't have this problem.

dberlow commented 5 years ago

Man. I’m also looking for the background I illustrated, for context within the space, which is key.

The other thing is, I miss-wrote the (wght), relative to the instance I circled, I wrote “750” in the stage play, it should be “300”.

Thanks.

On Apr 12, 2019, at 6:28 PM, Chris Lewis notifications@github.com wrote:

Yeah, say if the font-size is 64pt (as in typetools H1), when opsz hits 14, Safari ignores the CSS and shows it as opsz 64. I've sent this to my contact for these things, Myles Maxfield on the WebKit team. Chrome and Firefox don't have this problem.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

dberlow commented 5 years ago

I mean, Man! We got three alliance members who don’t turn opsz on at all, and one that’s opsz-insistent.

On Apr 12, 2019, at 6:32 PM, David Berlow dberlow@fontbureau.com wrote:

Man