Typography

Resources


Transcript

[00:00:08] Patty: Typography. Usually when I say typography people hear topography. I may even say it wrong, but we’re talking about fonts, not maps. So just to be clear on that, we’re talking about all the type and the fonts and all that goes with that in pretty much anything.

Everything design. If you think about it, everything designed right now is around the typography. It’s around the print, it’s around the type, everything else is designed around it. So if we can improve our typography, we can improve our design for everything. So here we go. Let me get my presenter view here.

So usual notes, uh, this is being recorded and will be available in the member archive within one week. Transcribed and all that. Edited clips may be featured publicly. Uh, captions are available through Google Meet at the bottom of your screen. And closed captions, full transcript available below the recording.

If you’re hashtag replay. Uh, if you want any available at the end or after each segment, uh, since there’s one present today, stop me at any point and say, excuse me, what the hell? And or leave them in the chat box and we’ll get to them at the end and we’ll go through it. Today in typography. Again, fonts, not maps. We’ll be talking about specifically sizing, spacing, and alignment.

Uh, so that the information is going to be presented in a way that you can use this in Canva, in convert kit flow desk, your website, wherever. For the most part, I want to keep this kind of agnostic, just to be thinking about where all you use fonts, and their sizing, their spacing and their alignment.

Mainly, I want you to get into the habit of thinking about proportions rather than a fixed size. Everybody likes a cheat sheet, and I could say for this, you should be using this font size. For that, you should be using that font size. Unfortunately, there really are no hard and fast rules for type on the internet. Because everything is based on what font you’re using. How thin is it? How thick is it? How big is it? Is it a Serif? Is it a san-serif? Does it have those fancy little feet? Does it not? Is it handwritten? What is it? So what font you use decides so many of those things. How big can it get? How small can it get? What spacing does it need?

What spacing does it come with? What weight does it have? What weights will you use? Bold, thick, extra thick, black, 900. All different pieces of the font. So think proportions rather than fixed size. Here’s why. These fonts, for example, at the top line, there is a serif font and you can see it has those little feet and little hooks on the r’s and the t’s and the q’s.

The middle line is a sans-serif. Doesn’t have those little, extra little feet. At the bottom is a script font. It looks like it’s like a wedding invitation or calligraphy kind of thing. Now I’m going to ask you, do these all look like different sizes?

Yes, no, maybe

[00:03:34] Amelia: Kind of,

kind of, but they look different sizes.

[00:03:39] Patty: They’re all the same size. They’re all 24 pixels incising or. The fuck. Why is that? Because each font is designed with a specific height to it. We all design in little boxes when we design a font and this comes back from way, way back in the day with Gutenberg, the printing press and type setting, and putting all of these things together.

Each letter was a little metal or at the time wood but now metal block. Well now. Anyway, there are still printing companies that still use metal print. We’ll go there later. But each one is a little block. So you have to fit each letter within this block in a certain way. So each one has its own line height, or letter spacing, or a little box. Boxes you have to squeeze it into. And all of these fonts were designed in that same box, 24 pixels high. This is why fixed rules don’t work. ’cause I can say, okay, make your body font 14 pixels. Is that going to work with that script font? No, that’s going to be completely ilegible. So think proportions rather than size, fixed size and come into hierarchy versus size.

And this is not necessarily a fight. This is not a heavyweight match between hierarchy and size and because your hierarchy can determine what sizes you use. Things that are important are potentially bigger. Things that are less important are potentially smaller. So think of importance and higher, higher key size.

My [voice] to script did not work, hierarchy and size just because it’s big doesn’t mean it’s important. It gets confusing really quick. So how do we determine hierarchy. Your content. It’s your title, your heading, your body text, captions, calls to actions, the images on the page, the background images, all of it. If you’re making a sandwich, what’s the most important piece of your sandwich?

Depends on what kind of sandwich you make. Like some sandwiches, it’s the bread that’s important. Some sandwiches, it’s the meat. Some sandwiches it’s the eggplant. It just depends. So you have to determine. What am I going to make stand out. Things to keep in mind on, based on content, based on context, are your headings versus your body.

So your headings, I think newspaper, back in the day. Big thing that’s going to stand out is your headline. That’s usually a big ass font. And then the body text under it, relatively small, compared. Would you make your body text huge and your heading small? No, because the heading is what sells the newspaper. Not necessarily the copy.

We all send out links to articles we haven’t read based on the title. Based on the heading. We want to avoid doing that, but you want to draw attention to what’s important. And we can do that with the size. So from this, we can maybe tell what’s important based on spacing alone, but not necessarily anything else.

Like what is your eye go to?

[00:07:22] Amelia: Well, definitely goes to the top line. And then the second line, although it is hard to differentiate because everything’s the same size,

[00:07:30] Patty: everything’s the same size here. So one, this is why it’s critical to use proper HTML. This is semantic HTML, H one through H six, your heading tags for what’s most important.

Because then it’s going to automatically display that in a browser what’s most important h one what’s least important, H six, then your paragraphs and two, it’s also important to determine what is important before adding in font sizes. Then compare. What’s easier to skim narrow into where you want to read and then actually read.

Which one would be more appealing for you to look at when you’re trying to look for information?

[00:08:19] Amelia: Definitely the one on the right.

[00:08:21] Patty: The one on the right. And there’s a lot going on here. There’s line spacing. There’s letter spacing there’s size. What stands out most is lorem ipsum dolor, and this is all nonsense speak, copy, placeholder text.

And then the next thing that stands out is either going to be the sed at lectus id eros convallis. This is fake Latin, or the sit amet, consectetur, depending on what your eye wants to go to. And then it goes down the page. So we all start at the top and go down, but based on the size, that’s what we’re going to look at first.

Makes sense?

[00:09:08] Amelia: That makes sense.

[00:09:09] Patty: Okay. So this is why I bring up spacing. Spacing can make or break your entire design. So you want to make sure that you’re giving constraints to the thing that you’re designing. And be cognizant and thinking, where is this going to be seen? What is, what is this going to be consumed on?

Because that will determine the size, which will determine the spacing that you have to play with. And what’s going to fit in where. Because what’s needs to be small for a watch, it needs to be big for curved 30 inch desktop display. We have to design one way for mobile. One way for desktop. One way for tablet. We don’t have the luxury of this is an eight and a half by 11 piece of paper.

And we can do that with CSS, Cascading Style Sheets. You can do that in your themes. Squarespace and WordPress both allow for designing for both. But you want to be thinking about that. And when it’s really hard to determine where is this actually going to be seen? You want to put in a constraint and say, this is the max width that this is going to be seen no matter what.

And let’s get detailed on that. Let’s think about letter spacing. And it’s the amount of space between each individual letter, without regards to like what a T next to an H how much space is in there, or how much space is between the H and the E, that’s kerning that we really don’t get into on the web a whole lot, and Canva doesn’t allow for it, unfortunately, but what they allow for is letter spacing.

You can stretch out the amount of space between the text, or you can shrink it back. And again, this comes down to that individual letter when you’re creating on the lead type, metal type, how much space is around the letter that was made. Font designers take that into account. And they say, okay, as a rule, this much space between each letter works out just right.

It’s something they design into the font. They built it into the font. So I really, especially in Canva, because Canva likes to default by adding a whole lot of space between letters. I really want you to go in there and zero that out. And leave the font designer’s choice at its default. At zero. Because they worked hard to design that.

Otherwise, you’re going to get this, and this makes it very hard to read because when we read our eyes actually bounce from word to word to word to word and like the singalong, like the little red dot bouncing along like a Disney sing along. That’s how our eye reads. And when we put too much space our eyehas to work that much harder to figure out, okay, where’s the word?

Where’s the space between the word? Is this a new word? Is this word made up of one letter, two letters, three letters. What is actually a space between the words. There’s too much space. How do you get used to figuring out if you want to play with that? How do you get used to figuring out what’s a good amount of space?

Stretch it out way too fucking wide and go, okay. Yeah, that’s too much. And then bring it back in. There’s not enough space between these letters. It’s absolutely illegible. And I have seen this on websites. But this will teach you, you’ll begin to build that heuristic of that developing your eye. Okay.

That’s too far. That’s too close. That’s Goldilocks. Just right. And this is the default letter spacing for this font, which I believe is Overpass. So you want to pay attention. How much space is between each letter in Canva especially. Default it to zero until you develop that eye and you start to play with different fonts to measure and figure out what looks and feels best.

Make sense?

And then there’s line length, or the sentence length. And, uh, this really gets a lot of websites and especially email I see, because without that constraint, without saying, this is the max width of what this is going to be, a paragraph on a watch, you can scroll for hours. It’s a little 21 by one inch screen.

You’re going to be scrolling forever. Right. But if you put that same paragraph, on a 30 inch display. Now my head is doing this to read a sentence. It’s too long. Because there’s been no constraints put in place. So you want to create a maximum, how far across the page? Visual, virtual digital. That’s the word.

How far across this digital page? My I going to have to go. You want to create a maximum and you can do that with your line length. How far am I going from left to right with my eyes and or my head? You can do this with character count. There’s a lot of debate on what’s quote, unquote, best for digital design when it comes to the length of a sentence, the length of a line. There is no hard and fast rule, again, unfortunately. For narrow columns, a lot of folks say 40 to 50 characters and that’s each individual letter across, including spaces. For wide columns it’s between 75 and a hundred. But again, that’s going to depend on what font you’re using.

So how the fuck do you make that choice of? Okay. I have a 14 pixel sans-serif font. It’s fairly light. How, wide should I make this before somebody’s eyes are going to get tired? Trick I learned from, uh, his last name is Kennedy. I can never remember his first name. UI course that it took a while ago. Is to double or triple the alphabet, just ABC, D E F all the way through Z or Zed.

That’s the width of a column. That’s a width of two columns, double it. And that will begin to give you that measurement of what’s going to look good here. Because otherwise you end up with this. Very long lines. You have to keep the eye moving for a very long time across the page. Digital page, which gets very tiring.

And another sales thing to think about is if someone has to do this while reading… What is my head doing?

No, I’m saying no. I’m saying no before I’ve even read what you’re writing. And that’s something to think about because our body speaks to our brains. When we’re reading something. What is no, you know, we want somebody to read down a sales page and go, yeah. Yeah. Uh huh. Oh, that’s me not. Oh, my neck is getting tired and I’m already saying no.

Okay. Next. The opposite of that is very short lines. It’s a quick read. Narrow columns, quick read but. It’s unbalanced. You see a lot of spacing, a lot of gaps with what’s going on because it’s just it’s too narrow. And I’ve seen blog posts this narrow, and it gets very tiring for the eye to do.

There we go. Is this ideal? It’s a great starting point. What’s the difference? Constraint. This fits three alphabets or 78 characters across at this font size, this font? This would be good for a blog post or an article or an email. But that constraint has been made. Once that line reaches 78 characters, a new line starts. You can control this with your page width.

You can control this with columns. You can control this with adding images left and right. However, you need to space it using your blocks, especially in Squarespace and WordPress, putting a limit on the width of that block.

And then to get it even more hairy, we get into line height.

Oi, more spacing. So a line height is how much space is actually between those lines in the paragraph. I don’t know if you went through like the American education system in college, everything is like 12 point Times New Roman. Double spaced. And there’s just gads of space between each line. That’s your line height.

And you want just enough space in between that it’s easy to read. Double space like that in print works because the idea behind that is room for the teacher to just bleed all over your work and say that’s horrible, right. Make markings and do all of that. And in print that works because our eye has more leeway with print.

And digital that doesn’t work. The is going to go where the hell? Okay. I start here. I go across. Okay. I’m done with that sentence. Where does my eye need to go next. And it wants to go down here and it has to search and that’s brain time that it’s taking it has to search go down. Where’s the next- oh, there it is.

Okay. There it is. And again, this comes down to figuring it out based on the font that you’re using it using. And when in doubt, put an X in it. What I mean by that is go into something like Canva, pick out the font that you want. Figure out your letter spacing. Figure out your font size. Figure out your line length. And then create a new character, just an X. Capital X.

And space it in between those lines. And if that fits in there between the lowest, the descenders, like a G and the highest, like a capital T there’s your line height. Typically, you’re going to see that it’s 1.3 to 1.5. And what that is is a percentage. You’re going 130% to 150% of the font size itself, that is the spacing between them. Again, this comes down to practice.

Here we go. Academia. Plenty of room to bleed on it. And this could work on a digital page, but there’s a lot of space and there’s a lot of room for the eye to get lost. What do we think about this one?

Looks good, right? Yeah. I have seen this on websites as a stylistic choice with very thin fonts and it’s not cute. It’s a legible. Not enough line height. Here we go. Even this could be a little tight. This is 1.3 or 130% of the font size. That’s how much space is in there. This is one X height. Between those lines that could be a little tight.

It comes down to playing and starting to think. Okay. How easy is this to read? Getting friends opinions, if necessary. Thanks. Just specifically, does this read okay? And if there’s hesitancy on what’s on the page, it might be difficult to read.

Now. Here’s my favorite thing about fonts and spacing and typography on the internet. Alignment. And this is the biggest place I see folks get, they just trip over it. Because if you align your text properly, you will literally line in your wallet. So we know moving the head around makes me already say no.

So if you don’t have your text aligned, I’m already saying no, because my head has to move around a lot. And I’m going to speak specifically to left to right language speakers. If your right to left, you will quite literally just reverse this, align your shit left.

Align your shit left. Alright, so let’s break this down just a little bit. When can we center things? Because everybody wants to center things. It’s a huge thing in holistic wellness and witchy websites, everything is centered. And that makes it very difficult for the eye to know where to go next.

Our eye naturally wants to fall because we speak and write and read, speak? We read and write left to right. So our eye naturally wants to go to just one line on a page. Oh, there we go. I know exactly where to go next. I know exactly where to go next. I know exactly. When you center it again. I’m shaking my head no. My eye has to work extra hard to figure out where that next line is. Very difficult to read. And you’re doing a disservice to you, to your audience and to anyone that has any type of reading issue, dyslexia, neuro divergence, ADHD. It’s distracting as hell. So only center it. If it’s really fucking simple.

And I mean, one sentence, two sentences, two lines, three lines the absolute maximum. One line, you can break it up, make it centered. That’s fine. You want it to be something that is fairly easy to digest and very simple, like main point heading at the top of your blog post center that. Fine. A date and time that you want to call attention to in the middle of an email or the middle of a blog post. Center it.

Fine. Paragraph? No. Three or four sentences. No. The only caveat there online is perhaps a testimonial because a lot of them are center aligned. If it’s a deep testimonial that there’s a lot of verbiage on it. Toss it left. If it’s one or two sentences align it center, that’s fine. [inaudible] when you’re centering is an, I call it, there is a technical term in typography, but I call it Dingleberry. And it’s just this one little word that ends up centered at the bottom. And it’s exactly what it sounds like if you’re from the Midwest and have ever had animals, there’s a little Dingleberry of a word. So you want to make sure that even if everything okay, it’s two or three sentence, two or three lines, max.

It’s great. Looks good. You shrink it down. And you have four words, four words, for words,, and then one word in the middle. That’s your Dingleberry. Modify that so that you don’t have any dingleberries. It just will make everything look that much better. Okay. And I can’t see your face with the word when I say Dingleberry.

So I just do, there is a technical term for it. It’s either orphan or widow. I can never remember which. Dingleberry is the visual that sticks. So then the next thing I, like, I see a lot of people like to do is justify their copy. And justify is equal width. So everything lines up on the left, everything lands up on the right and you have just this column.

It’s great in print. Because you can hyphenate in print. So you get very few gaps. Justified text is only justifiable in print. Hard and fast rule that I rarely break for online. Stop justifying print, especially in Canva. And it’s a trend right now to have justified space on these designs for big texts.

And then there’s big gaps. And the brain has to work that much harder to figure out what is actually the thing I need to read. Align it left. I know it’s going to be uneven on the right. Hell, center it. Stop justifying text. Those great big spaces are completely random based on what you’re typing and you’re forcing that formatting, and it’s just that much harder to read for anyone that has any kind of issue reading in general. So I get upset, personal opinion, hard and fast rule. I will yell at you. Do not justify. Unless it’s going to be printed. Don’t do it. And only then if you’re hyphenating. So if a word breaks, it’s hyphenated, it goes on to the next line, which minimizes all of those jagged spaces.

And if it’s long, it’s left. If you’re writing pages and pages, paragraphs, and paragraphs of copy align it all left. Period. You’re starting sentence starts at the left read on returns to the left. It’s a natural place we want to return to because our eye again, bouncing, just let it fall where it wants to go.

And again, if you are right to left, flip it, align it all right. Boom. Align it left. You’re also, if someone is reading your website and it’s being translated to a right to left language, you’re helping out by having it all already formatted. It’s gonna flip it and make it that much easier. Depending on the rules that you have in place. But you can simplify it and make it more open to international audiences by aligning it left.

Beg you. Beg you. And then if it’s a price. It’s right. There are those rare times that you need to align something right. And it’s usually a number or tabulated data in a table, spreadsheet, et cetera. We want to line up those decimals. We want to line up those zeros. There we go. If it’s a number, if it’s right, if it’s price, it’s right.

Do you, how long I worked, trying to get these to simplified. If it’s price it’s right. Align things, very sparingly to the right, unless you want it to abso-fucking-lutely stand out. Or it’s a number. And that’s what I got for you today. I have a cheat sheet with all of these. I don’t know what they’re called mnemonic.

I don’t know devices and trying to think. But it’s just a matter of playing with it, practicing it. And there are very few hard and fast rules. So a web browser, if you do not declare a font size, typically will default to 16 pixels and be mindful of that when you’re making a design. I like big fonts and I cannot lie. Majority, of the fonts out there, especially from Google fonts, if you’re using any of the popular fonts for their body text, start at 16 pixels. And go from there, I’m going to leave some resources. There are tools out there that will help you make a font choice and alignment and spacing choices, which typically follow the Fibonacci sequence. Why not? Right. And then there’s Henry’s Rule, but that’s a whole other thing they’ve developed their own spacing and off of that, off of the Fibonacci sequence, I have tried for years to develop my own Fibonacci just kind of rules the day because it’s the divine pattern, right? It’s found everywhere. Use these tools as a starting point. And play. Drop whatever you’ve got, bring it to office hours, clarity call what?

And we’ll work it through. But for accessibility, typically I say 16 pixel is a great starting point. Okay. And thin fonts are hard to read. Thicker fonts also hard to read and you want somewhere in the middle. Again, it’s learning. Take it too far. Really difficult to read. To the opposite too far, too difficult to read.

Get that pendulum in the middle. Okay. So what are we going to work on? We’re going to work on proportions, not fixed sizes. Okay. I am here for any questions. If you want to work on anything.

[00:31:53] Amelia: That was great. I feel like I was happy to learn that my website followed most of your rules. I don’t need to go, um, immediately change or anything.

I, um, have definitely noticed the center everything trend. And I feel myself go there and then I always pull back because I find it, so illegible, like, it’s just so hard to read the thing.

[00:32:21] Patty: You’re not a wine bottle. Yeah. Not a wedding invitation. Uh, it’s it, it has its place. Simple things can be centered. One or two lines. That’s fine. You have paragraphs of texts. When I say, align your text, I line your wallet. I really do mean it. When people have nothing but centered text, and then they toss that text left. Conversion rates go up. Why isn’t anyone reading anything? Because you’ve made it really fucking difficult to read.

[00:32:57] Amelia: Yeah. I think for myself, my rule has always been like, if it’s not H one or H two, it’s not centered. Either it’s that important, and I can, and it’s that short, it can be in the center or it’s I don’t, I make myself left align it.

[00:33:13] Patty: And I even aligned my H ones and H twos, because I want the eye to go down that page. Because if the eye is moving, it’s an interruption in the reading.

So, and this comes down to heuristics and just developing and knowing what works. And then. Falling to analytics, what’s going on on the page, uh, you know, heat mapping, that kind of thing. But our eye naturally reads because we are left to right. And an F or a T pattern or not a T E F E. There we go. We start at the top and then we go down and we’re looking in the middle.

Let me go down. So if we can keep everything fairly aligned left, then we’ll just keep the person going down on the page.

[00:34:07] Amelia: Yeah.

[00:34:09] Patty: And then to one thing that’s in and we’ll be covering in more detail next year. Not relying on our H ones and H twos for font size.

[00:34:20] Amelia: Oh yeah. Definitely. And yeah, because I I’m just been doing a lot of SEO work on my website. So that’s like, it’s so important to rely on them for contextual hierarchy or content hierarchy and not just to get things bigger,

[00:34:41] Patty: bigger. Right. You got to change your style sheet for your.

But yeah, not relying. So what we’re talking about for those that are, have not watched the previous workshop on that, but your H one through your H six is for the context around what’s leading to the body copy. You’re heading introduces a point that you then further develop with your paragraph copy.

So if you have an H one beautiful introduction,tada, then you have your, blog post and then in the middle of the page, because you wanted them big font to standout you put them on H one, I’m an antique lady in terms of the hierarchy of content. You’ve told the search engines you’ve told the browser. This is very important. Even if you were just highlighting the word fuck, and you want it to really big. You just told Google, you’ve told Bing, told DuckDuckGo, Firefox.

You’ve told Chrome that’s an important thing. When you just wanted it to look big. Don’t do that. Don’t rely on the HTML tags to make your site look a certain way, rely on the style sheets, all that honky-dory like great code that you have to deal with. Or a specific blocks if they let you play with those font sizes, play with that.

So, yeah. Yeah. In Canva, especially watch your proportions, watch the sizing based on the proportions of what’s important.

So yeah, and I will drop that sheet in slack and it will be able to over the recording, uh, that breaks this down a little bit more. And hopefully a cheat sheet kind of way. Yeah. Any questions? What questions come to mind? What examples come to mind of like websites like, oh shit. Yeah. I know.

[00:37:03] Amelia: I feel like this isn’t really a question, but just an observation. Which is the, um, I’ve really started to pay more attention to like how, when I’m working on my website, I’m like using the desktop view or my laptop view. And I started paying a lot more attention to switching it to the mobile view because I use Squarespace and like, it does automatically adjust the sizing, but it will still often leave you with that? Like what with your like Dingleberry or you’re like all that stuff will happen and I’ve gotten a lot more careful about, um, looking at both.

[00:37:45] Patty: Yes.

[00:37:46] Amelia: And then also, like I do look at my analytics and the vast majority of people view my website from desktop. So it’s not, I know the stats that like, everyone looks at all your stuff from mobile and that hasn’t quite been my experience on my site, but I still try to pay attention to how that looks, especially because I have like pop-up forms on my website, like subscribe to my like lead magnet forms and stuff. And those really weird on mobile, if you don’t pay attention to them.

[00:38:16] Patty: Yes. And for mobile, I would almost suggest turning them off, um, for a number of reasons. But yeah. So when it comes to the analytics, you want to pay attention to what is the vast majority of my user base looking at, and if it’s desktop, that’s fantastic. And with you not being on social media, that makes a lot of sense. Because then people are not in apps going to your website. And being mindful then specifically for a mobile, the design, yes, but more of the optimization because the search engines.

The Google in particular will give higher priority for mobile optimized.

[00:39:03] Amelia: Yeah. And I guess, um, and do you use Google Search Console to make sure that there are issues with my website with that.

[00:39:11] Patty: Good. And, um, yeah. Let’s see in Squarespace pulls in a lot of Google fonts.

[00:39:23] Amelia: Yeah, I use Google. My two core fonts are google fonts, which is fine. I don’t know if I love it all the time. Um, yeah, it works out fine. I guess. I picked them because I wanted, I spent quite a while choosing fonts that I could get on Canva and Squarespace, which is how I landed with Google fonts.

[00:39:46] Patty: So, and there is a.

In the resources section on the site that goes, I update it as often as I can, that shows fonts available for, um, I’ll have to look at flow desk. Um, but for convert kit or Canva, WordPress and Squarespace Squarespace, I think Squarespace is on there.

[00:40:05] Amelia: Yeah, I, yeah, it’s pretty fun for my fonts are not in FlowDesk. So I have to use alternate in my email marketing and I just accepted it.

[00:40:18] Patty: The thing with email too, to be mindful of fonts is that nine times out of 10, the system font is going to be what’s used. So whatever the person using the computer or mobile device has chosen as the font is what’s going to be there.

You can use your Google fonts in email, but it’s going to depend entirely on the email client, if they’re actually going to load and serve those for. So you’re better off sticking with a system font, Georgia. Times New Roman, Lucida Grande, Arial, Verdana. Those really, they were rampant in the early nineties and they’re great fonts.

I love them. It’s best to stick with those for email, because that’s, what’s going to show up.

[00:41:06] Amelia: Yeah. I’ve noticed all my emails arriving in Arial. Um, which is fine. I also noticed this trend. I don’t like, um, and I think Flodesk really does this, which is to force it to use your fonts by basically turning your text into an image.

[00:41:28] Patty: Oh.

[00:41:30] Amelia: And it’s so gross and I really hate it. And then it’s like, not highlightable and it’s not like. It’s it’s the worst, but, so Flodesk has all these like, blocks where you like type in your texts and that basically serves it up as an image but it lets you use whatever, like at force- then it’ll look how you want it to look, but it’s not text in your email.

[00:41:49] Patty: Okay. So few caveats there. Make sure you’re using your alt text.

[00:41:54] Amelia: Yeah.

[00:41:55] Patty: For accessibility. And for people that turn off images in our email.

[00:42:00] Amelia: Yeah. I first noticed it. Cause I would get these emails that were just all big red exits because so much of my images are turned off and I was like, is there nothing in this email then I was like, I know it’s just, they’ve just turned everything into an image.

[00:42:13] Patty: So yeah, that’s one reason. I was not a fan of Flodesk when they came out and cause they’re very pretty emails, but nobody puts in the alt text. So I have contextually. I have no idea what’s in this email.

[00:42:31] Amelia: That’s very frustrating.

[00:42:33] Patty: It is. And convert kit has the opposite problem. It’s all text. So you have to be mindful of your formatting. Otherwise you have that one sentence that goes across the 30 inch screen. If you’re not using any of the templates to constrain that. And email and layout is still stuck in table design.

There’s no divs. There’s no spans. It’s all still tables. Yeah. Pretty archaic. But it works. It’s pretty standard. It works, but yeah. Yeah. And then you have.

Well that we’ll, we’ll discuss that, uh, next quarter I’ll be talking about how your shit shows up in dark mode versus light mode.

Will be about that. Yeah. We’ll be covering that, especially in email. Because I’ll get emails, cause I work in dark mode a lot and I can’t read it. Because they’ve declared a font color, but not a background color.

[00:43:40] Amelia: Wow. That never even occurred to me.

[00:43:43] Patty: It’s like, yep. Your black font on a dark gray background works real great. What?! It’s a whole thing.

Oh, so yeah. Well, any other.

My whole screen, just glitched. I don’t know if that what that was. But any questions, bring them into the community. Let me know. And I’ll get this recording up and the resources, if you’re watching the recording are available below. So yeah. Thank you for joining me today.

Any questions, anything bring ’em into slack and we’ll, we’ll hash it out. Sounds great.

[00:44:25] Amelia: Thanks, Patty..

[00:44:26] Patty: You’re welcome. Bye.

Leave a Comment

Join The Circle

Receive weekly tips to simplify & improve your magical online business!

We value your privacy. Unsubscribe at any time.

Almost There!

Check your inbox
and confirm your email address.