#font tutorial

i haven't really felt the need to change the font i use in years; it's Ariel Rounded MT Bold. i usually keep it Strong but you can experiment with that if you like the other styles

for the other settings i just use a bit of stroke and drop shadow:

one different thing i do which i don't think most people do is i duplicate the subtitles on top of each other - mainly to make the drop shadow deeper and make the text stand out in front of the background better

Hace unos días, cuando estaba compilando las fuentes para el pack que les subimos, me llegó una duda. Verán, algunas fuentes tienen versiones alternativas o caracteres alternativos. En Photoshop es fácil elegir la opción para usar esas variantes, pero me surgió la duda de cómo se lograría en CSS.

Bueno, al parecer la opción sí existe y se llama font-feature-settings. ¿Es infalible? Nope. ¿Podré usar todos los caracteres que tenga la fuente? No lo sé al cien por ciento. De todas maneras, quise hacerles este post para compartirles mi nuevo descubrimiento.

Tomemos de ejemplo la primera fuente de este pack, Balgon. Lo primero que vemos es el nombre de la fuente con caracteres que no están en los glifos principales, ¿cierto?

Pero si clickamos en "Ver todos los glifos", podremos darnos cuenta que sí están incluidos en la fuente, sólo que bajo un nombre diferente. En el caso de la fuente Balgon, tienen el nombre uniE000, de acuerdo al caracter. A veces, en otras fuentes, estos caracteres alternativos se llaman alt, aalt, salt, etcétera.*

Entonces, si queremos usar estas versiones, basta con agregar lo siguiente:

.tu-clase { font-feature-settings: "salt" 1; -webkit-font-feature-settings: "salt" 1; }

*Si no funciona con "salt", intenta alguno de los otros nombres como alt, aalt, etcétera.

¡Y voilà! Puedes ver el resultado dando click acá. ✨

Sure thing :) I always use Arial Rounded MT Bold as a font for my subtitles.

Here are the settings I use and, as you can see, they're very basic.

So the text should appear like this:

Fonts are one of those funny things. A lot of people never even notice them- unless they’re bad. They’re one of those silent glues holding a work of fiction together, noticeable only ever by their failings.

The world of fonts is really confusing, and it took me ages to get my bearings and figure out how I wanted to go forward with typesetting my manga. So I wanted to give other artists a bit of a leg up by sharing some of what I’ve learnt. I’m going to focus primarily on font choices for manga here, but this information should hopefully be applicable to any type of comic!

Fonts in Manga

Starting with manga! At some point, when deciding what type of font to use in English translated manga, one type won out. I don’t know why, because I think it’s pretty ill-suited to most manga, but it’s basically the same type of font you see in a lot of Western comic books and newspaper comic strips. It looks like this:

I personally don’t think these fonts are that suited to a lot of manga.  It works great for shounen- you want reading to be as easy and quick as possible so that you aren’t distracted from fast-paced fight scenes. But it’s not well-suited to shoujo, or to more introspective manga aimed at adult readers, either. It’s become a lazy choice for manga typsetting, the easy default regardless of whether it suits a series or not. They get the job done and they’re wonderful fonts, don’t get me wrong. But I don’t think they add anything to the manga they’re used in a lot of the time, and my personal opinion is that your font choices should do just that.

Back in the 90s Tokyopop did try a few different options. Cardcaptor Sakura and Magic Knight Rayearth both used Times New Roman (yes, seriously, they were that cheap) in its original run. Not the most exciting choice, perhaps, but on the other hand it does lend a nice novel-like feel to the typesetting.

The one where I really think they hit gold was Sailor Moon. (Yes, I know, what a shock, I love something about SM). The font they used for it probably ALSO came for free on their programmes back then (it’s called Formal 436 and can still be bought today), but its delicate curves were particularly well-suited to a shoujo manga with fantasy and magical girl themes.

The other main font they used was...wait, it has a ton of names. Cascade, Cassia, Formal 471... This leads into a different discussion about what a nightmare font licensing is, so let’s leave that alone for now! Anyway, it’s an absolutely beautiful font with elements of brush painting, woodcut, and calligraphy. It’s very, very uniquely suited to a shoujo series.

All in all, these font choices were great for a feminine series with fantasy and scifi elements. It seems like Tokyopop really pulled out all the stops for their flagship license, and it shows. These pages are really dynamic and fun to read, and I think the fonts definitely contribute to it.

In Japanese manga, switching between different Japanese scripts can lend a lot of flavour to the text.

At the top is a hand-drawn word with a bubbly appearance. Then Mina says ‘ii otoko’ in katakana just to make it stand out from the rest of the text. The ‘V’ in Sailor V is written in English, which stands out better than only spelling out the Japanese pronunciation of ‘bui’. Then ‘The End’ is written in English. So it all stands out!

English doesn’t have multiple alphabets (thank goodness!). So we can instead create this effect by mixing up our font choices. More on that later!

Lettering in Western Comics

This is not a subject which I’m particularly familiar with, I’ll admit right away. But I still thought it was important to touch on it. A lot of Western comics actually don’t use fonts- they’re hand lettered! In general a lot of Western comics published in the more traditional model are collaborative efforts. You’ll see separate credits for writers, pencils, inks, colours, lettering... A different person handles each task.

I’m only familiar with a couple of hand-lettered comics, including Bee and Puppycat and Fionna and Cake, which have really adorable lettering which combines elements of a cute girly handwritten appearance with a more script like appearance. And without the limitations of a digital font, all sorts of creative things can be done with them. The font can basically just go anywhere you want it to.

You can see that in some cases the speech bubble is curved, and the letters curve with it! Doing that sort of thing with a digital font is an absolute nightmare, and much easier with hand-lettering. And it looks so cute and dynamic on the page!

And of course, the standard font used in English translated manga today is based on the lettering styles used in both newspaper comic strips and superhero comics.

Its primary purpose is to be easy to read- very useful in particular for newspaper strips which were printed in small sizes and on cheap paper.

Creatively, hand-lettering offers you a lot of freedom and the ability to make some really artistic choices. But it’s also not very practical for single artists. It’s a totally different skill to drawing- I’m sure I’m not the only artist out there who has ‘doctor’s handwriting’ and couldn’t letter a comic to save her life! And not only do I not have the resources to hire someone to letter my manga for me- I don’t want to. I like making every page 100% by myself and having full creative control. So whether this approach works for you may depend both on your skills (if you’re already into, say, calligraphy, you might be able to letter your comic yourself!) and your preferences regarding collaborative work.

-

This is some of the stuff to keep in mind stylistically, but before we continue with adding fonts to comics, there’s a lot of fuss to go through when actually finding fonts which you can safely use! Font licensing is a total mess, to be frank. I’ll be going over that in part two, along with covering the main types of fonts out there and where to find fonts to use in your comics!

Please join me then! If you want to make sure you see when I post it, please consider following me!

Tutorial 6: Font (how to add)

Requested by: @hufflepuffjohnjaqobis 

This Tutorial Assume that: you have a computer and internet. 

Level: Beginner

Special Request? Send me a bunny

DIY Font Tutorial

Hi all!

Here’s a random tutorial I made in my free time. You can make your own logos and digitize your doodles with just a few tools! No scanners required. You do, however, need some version of Adobe Illustrator.

Have fun! :)

We have noticed we have followers who would also benefit from having these posts in English (or maybe even Portuguese or French, which may come in the future) so we decided to start posting in both languages from now on. Without further ado, let's get into the tutorial.

As I was saying in the Spanish version, this question popped up in my head while searching for fonts. I noticed many of them had alternative characters that were not easily accesible outside of desktop or Photoshop use. But what if I want to use those characters in CSS?

Well, the option actually exists and it's called font-feature-settings. But some things first: Will it always work? Nope. Will I be able to use all the alt types or letters? I'm not 100% sure. Regardless of that, I still wanted to make this post/tutorial to share my findings.

So, let's take the first font in this pack, Balgon. The first thing we notice is that the font name is written with different types, right?

Now, if we click on "View all glyphs", we will see that those glyphs are indeed in the font under a different name. In the case of Balgon, for example, they are uniE000, with every number changing according to each glyph. Sometimes, other fonts use alt, aalt, salt, etcetera.*

So, if we want to use these versions, we need to add the following code:

.your-class { font-feature-settings: "salt" 1; -webkit-font-feature-settings: "salt" 1; }

*If "salt" doesn't work, try using some of the other spellings like alt, aalt, etc.

Voilà! You can see the results here (text in Spanish). ✨

I've been sitting around for a bit thinking about this, and because of my own hardships to mentally write with others who use regular sized font, it came to my attention that maybe some people don't know how to, are new coming back to Tumblr, are stuck mobile like I am, etc. So, to avoid not having chances to write together, let me help you. ❤️💙 As someone who's been mobile for a while now writing on Tumblr, I'd be more than happy to help instead of messaging tons and tons of individuals. Here's how to do it and it's super simple!