# Dev Diary Ep45 - Introducing Typography

**URL:** <https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147>\
**Category:** Elements\
**Created:** [November 5, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147 "2024-11-05T15:57:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 5, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/1 "2024-11-05T15:57:46Z")

</div>

Hello again,

The text editor turned out to be a bigger project than planned, this was due to your feedback and us working hard to make sure we got it right. So today, I’m pleased to introduce the new typography component that works in conjunction with the new Typography area in the Theme Studio. You are now able to mix headings, paragraphs, and more in the same block of text, it’s pretty awesome!

And while this work isn’t quite finished, it is at a stage where we can demo it (and ship it in tomorrow’s beta), so you guys can give us some feedback on it.

Watch today’s video and see for yourself why this is a huge leap in WYSIWYG text editing.

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/c/bc16e04547464294093e98bc42039411286d01ef.jpeg "Dev Diary Ep45 — Introducing Typography") ](https://www.youtube.com/watch?v=rOHc9Z_Dx2Q)

## Thanks as always!

We’re listening to all your feedback and working super hard to make Elements the perfect website builder.

See you next soon

Thanks,  
Dan & Team Realmac.

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [November 5, 2024, 4:13pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/2 "2024-11-05T16:13:02Z")

</div>

Looking great, very exciting!

How would you add buttons, dividers, images/svgs, embeds, or videos inline within an article (typography) element? Currently it looks like you’d have to create two _(or more)_ `<article>` elements and place any buttons, images, videos, etc in-between them — which isn’t ideal from a semantic/SEO perspective. I could also see folks wanting to add containers, grids and flex elements in an article for things such as galleries, figures, tables (there’s also no table component yet), etc. Also, with regards to images and SVGs, there’s also the question of how to include them inline (spark lines, custom emoji, etc) as well as how to float them and wrap the text around them, beyond just placing them as a block.

Are there standard typography styles/settings that would be common to each theme, allowing you to quickly switch themes and keeping the typography largely intact, or would you have to go in an change each of the typography settings for each of the elements in your site every time you change the theme?

As for naming, ‘text’ and ‘typography’ are a little confusing. Perhaps something like ‘label (short text snippets)’ and ‘text (long form articles, etc)’ would be more familiar? I know you’re leaning on Tailwind’s Typography extension here, but while the text is being styled using the Typography extension, users will most likely still relate to it as text.

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 5, 2024, 4:20pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/3 "2024-11-05T16:20:50Z")

</div>

What an update once again. It looks very good with lots of possibilities. The only thing that isn’t clear to me is why there are two components: Text and Typography. If I understand the explanation in the video correctly, the Text component is for short pieces of text, including headings, and Typography is for longer pieces. But why wouldn’t you just use Typography for short pieces and headings as well? At first glance, the Text component seems a bit redundant. Maybe I’m wrong. That’s why I’m very curious about the update coming tomorrow.

---

<div class="post-metadata">

**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\
**Post date:** [November 5, 2024, 4:22pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/4 "2024-11-05T16:22:44Z")

</div>

Congratulations, the Typograpy Element looks great! Only questio I have - maybe missed it in the Video - can I write in Markdown?

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [November 5, 2024, 4:31pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/5 "2024-11-05T16:31:33Z")

</div>

Looks fantastic and I am looking forward to banging on the new beta tomorrow. I also agree with @anon68150607 & @Bartje with regard to naming convention. It is a bit confusing, (although one could get used to it). Also, the text element **NEEDS A LINK CONTROL** (unless of course I just didn’t see it - I did see the one for the Typography Element). I am also tending to think that maybe just the typography element is needed as it has all the needed controls. Name it Text and call it a day…🤔

I am also **VERY** happy with defaults now able to be set for colors for at least some things.

Looking fantastic. Thanks for all the hard work.

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [November 5, 2024, 4:57pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/6 "2024-11-05T16:57:11Z")

</div>

This is 100% Excellent work! For me this is a game changer!

> [@anon68150607](#):
>
> How would you add buttons, dividers, images/svgs, embeds, or videos inline within an article (typography) element? Currently it looks like you’d have to create two _(or more)_ `<article>` elements and place any buttons, images, videos, etc in-between them — which isn’t ideal from a semantic/SEO perspective. I could also see folks wanting to add containers, grids and flex elements in an article for things such as galleries, figures, tables (there’s also no table component yet), etc.

Yep, need this but maybe its coming.

> [@Bartje](#):
>
> What an update once again. It looks very good with lots of possibilities. The only thing that isn’t clear to me is why there are two components: Text and Typography.

I can see this for insuring a wrap container is named. `<article> <div>` etc (see below). Though I suspect a condition could be added, If you didn’t name a container it would simply default to not only unlabeled, but not even being used. I like the short name of text and typography, it won’t take long at all to know exactly what those mean and how to use them. But I agree, can the whole thing be simpler, just text?

```auto
<article>
<h1>Headline</h1>
</article>

```

VS

`<h1>Headline</h1>`

---

<div class="post-metadata">

**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\
**Post date:** [November 5, 2024, 6:10pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/7 "2024-11-05T18:10:53Z")

</div>

Like everyone else so far: Yes, but…

If you’re doing a long-form article, you embedding at least images in it here and there, but as others pointed out, there may be more.

So while I very much like what you’ve done with Typography, it won’t work for what I need as is. I’ll be making a lot of Type/Typography blocks for a single article.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 5, 2024, 7:03pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/8 "2024-11-05T19:03:55Z")

</div>

This is looking good, but I agree with all of the other comments that there are some unanswered questions about things like embedding images. This is where I see the Markdown support making sense as it is very easy to handle this with markdown. But maybe there is something in the Tailwind typography plugin that makes this simple to achieve. I certainly hope so as I would hate to have to break a chunk of longform text up in order to have images inline with the text.

That said this is a HUGE step forward from where we started with the text engine, so kudos to the team for moving the needle way further forward with text.

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [November 5, 2024, 7:35pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/9 "2024-11-05T19:35:43Z")

</div>

Wow, apart from embedding images, which I’m sure will come soon enough, this looks very promising and easy when it comes to adding and styling text content. Well done.

Will tomorrow’s beta update include V2 components already?

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [November 5, 2024, 8:03pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/10 "2024-11-05T20:03:59Z")

</div>

This is super! Looking forward to trying it out!

---

<div class="post-metadata">

**Author:** ![luckylindy](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@luckylindy](https://forums.realmacsoftware.com/u/luckylindy)\
**Post date:** [November 5, 2024, 8:46pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/11 "2024-11-05T20:46:46Z")

</div>

As someone who does not use markdown, i’d appreciate an object-oriented (i.e., component) solution for inserting tables, images, buttons, etc.

---

<div class="post-metadata">

**Author:** ![luckylindy](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@luckylindy](https://forums.realmacsoftware.com/u/luckylindy)\
**Post date:** [November 5, 2024, 9:10pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/12 "2024-11-05T21:10:38Z")

</div>

@dan This really was a major whet of my font and typography nerd appetite. Brilliant.

I did not see a control that would allow me to set line and paragraph spacing (might that have been under the Typography \> Spacing twisty?) If it doesn’t exist, please include that functionality.

Re: what others have said about Text vs Typography, I agree: we only need the ‘Typography’ component (unless you have a use case for why we need both?)

How do i sign up to get access to the betas? Did that window close? Is it too close to public beta so best to wait? I’m building a relatively simple site for a new business I will be starting early in the new year and would love to see how Elements performs in that endeavor.

Cheers.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:10am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/13 "2024-11-06T08:10:44Z")

</div>

Thanks for all the feedback. I’ll do my best to reply to all your feedback 😅

> [@anon68150607](#):
>
> How would you add buttons, dividers, images/svgs, embeds, or videos inline within an article (typography) element?

You can’t currently, but it’s certainly something we could do in the future.

> [@anon68150607](#):
>
> Currently it looks like you’d have to create two _(or more)_ `<article>` elements and place any buttons, images, videos, etc in-between them

That’s correct for now, you can use a custom component if that’s something you _really_ need to do.

> [@anon68150607](#):
>
> could also see folks wanting to add containers, grids and flex elements in an article for things such as galleries, figures, tables (there’s also no table component yet),

Yes, indeed, we thought this would come up and it’s something we could add in the future.

> [@anon68150607](#):
>
> Also, with regards to images and SVGs, there’s also the question of how to include them inline (spark lines, custom emoji, etc) as well as how to float them and wrap the text around them, beyond just placing them as a block.

Not currently, those are things we could add in the future.

> [@anon68150607](#):
>
> Are there standard typography styles/settings that would be common to each theme, allowing you to quickly switch themes and keeping the typography largely intact, or would you have to go in an change each of the typography settings for each of the elements in your site every time you change the theme?

Yes! It’s flexible enough that themes can ship with their own setups, but you can also override them with your own settings. It’s all very flexible!

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [November 6, 2024, 8:13am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/14 "2024-11-06T08:13:32Z")

</div>

will the image text component make a return?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:23am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/15 "2024-11-06T08:23:13Z")

</div>

> [@Bartje](#):
>
> If I understand the explanation in the video correctly, the Text component is for short pieces of text, including headings, and Typography is for longer pieces. But why wouldn’t you just use Typography for short pieces and headings as well?

There’s a couple of differences, that become a lot clearer in practice when you start using theme. The Typography component has a wrapper around its content, it applies a “prose” tag so the various H1, H2, tags can be styled by the Typography plugin in Tailwind.

`<section class="prose-cards"><H1>Title</H1></section>`

Whereas the text plugin is a lot cleaner and would only output the following:

`<h1 class="">Title</h1>`

The plain text editor will also be used in Buttons and similar components that you really wouldn’t want the typography controls or extra div wrappers.

There’s also a fair few differences between the controls on the two text components, we’ll get that written up in the manual shortly.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:26am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/16 "2024-11-06T08:26:02Z")

</div>

> [@WeaverPixel](#):
>
> Congratulations, the Typograpy Element looks great! Only questio I have - maybe missed it in the Video - can I write in Markdown?

No, Elements doesn’t currently support markdown. Although it is something we could add in the future if there is a great demand for it.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:26am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/17 "2024-11-06T08:26:35Z")

</div>

> [@sbchasin](#):
>
> Also, the text element **NEEDS A LINK CONTROL** (unless of course I just didn’t see it

Yes of course, both have a link control ☺

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:29am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/18 "2024-11-06T08:29:01Z")

</div>

> [@pumpkin](#):
>
> Wow, apart from embedding images, which I’m sure will come soon enough, this looks very promising and easy when it comes to adding and styling text content. Well done.
> 
> Will tomorrow’s beta update include V2 components already?

Yes, it’ll include everything, New V2 Components, Typography, Quicklook documents, Dark and Light mode support — it’s a whopper of an update!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:33am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/19 "2024-11-06T08:33:05Z")

</div>

> [@luckylindy](#):
>
> I did not see a control that would allow me to set line and paragraph spacing (might that have been under the Typography \> Spacing twisty?) If it doesn’t exist, please include that functionality.

Yes, you can set, Alignment, Line Height, Letter Spacing, Weight, Font Family, Font Size and Colour.

> [@luckylindy](#):
>
> How do i sign up to get access to the betas? Did that window close? Is it too close to public beta so best to wait? I’m building a relatively simple site for a new business I will be starting early in the new year and would love to see how Elements performs in that endeavor.

Now that we have the V2 Components and new text engine in the beta we’re soon going to start adding more users, drop me an email ([dan@realmacsoftware.com](mailto:dan@realmacsoftware.com)) and I can send you the details!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 6, 2024, 8:34am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147/20 "2024-11-06T08:34:55Z")

</div>

> [@Godber](#):
>
> will the image text component make a return?

Most V1 components (and more( will be making a return. But, I’m not sure I know what the “image text” component is 🤔 Can you share a few more details on what it did?

[Next page](https://forums.realmacsoftware.com/t/dev-diary-ep45-introducing-typography/45147.md?page=2)
