Questions tagged [typography]

Typography — in digital development — includes the creation, formatting, organization, arrangement, rendering, legibility, and readability of visual type on a device. This often extends beyond letterforms, numerals, and punctuation to include iconography, text layout, and more.

Filter by
Sorted by
Tagged with
1 vote
0 answers
19 views

How to implement custom font-face to angular 15 typography to use globally

I have new angular 15 project and I would like to implement custom font-face as my typography but I can't make it work. my fonts folder: assets/fonts/Barlow-Medium.woff /typografy....
LaCodeM's user avatar
  • 686
0 votes
0 answers
31 views

Bootstrap font-weight utility and black (weight 900) issue

Bootstrap (5.3.1) has it's font-weight utility setup as per the code below. However, using this setup I do not understand how to easily access font-weight 900 (Commonly called "black"). I ...
mayersdesign's user avatar
  • 5,062
0 votes
0 answers
11 views

Organize style of typography in project with styled-component

I am have an app with React, TS and I want to use styled-components, but I am beginner in this library. Would you help me to know about some good practices in configuring typography? I mean ...
Wirbelwind's user avatar
0 votes
0 answers
13 views

Different Angular Material Typographies for different screen sizes

Current situation: I have defined an angular material typography for my project like below: $typography: mat.define-typography-config( $font-family: Text, $headline: mat.define-typography-level( ...
Mina Soleimanzadeh's user avatar
1 vote
3 answers
54 views

Align text baselines across columns in CSS

I am faced with the CSS implementation of a multi-column layout that aligns the first line of the second column, which may have various font sizes, to the second line of the first column. Like this: (...
fbmd's user avatar
  • 740
0 votes
1 answer
80 views

Letter spacing in CSS changes word spacing?

I've observed that when I adjust the letter spacing in CSS, the word spacing seems to change automatically. However, after extensive research, I couldn't find concrete information on this relationship....
Jack Trowbridge's user avatar
0 votes
1 answer
38 views

Some line-height values on inline elements results in strange container heights

Consider the following code (an inline <span> contained within a block-level <div>): <div> <span style="font-size:40px;line-height:3px;">HELLO</span> </...
user3163495's user avatar
  • 2,477
0 votes
1 answer
36 views

Prevent orphaned words with Tailwind?

Is there a way in CSS (specifically Tailwind) of preventing orphaned words in a block of text? I can achieve this with a &nbsp; but I believe their is a CSS solution. <p>This is my text that ...
Evanss's user avatar
  • 23k
6 votes
1 answer
110 views

Flutter/Dart: Changing colors of specific unicode characters in a string

I'm new to Flutter, trying a code to change the color of specific Unicode characters in a string. Color coding \u0951, \u0952, and \u1cda to say blue, red and green. The output string is not matching ...
user2901219's user avatar
0 votes
0 answers
29 views

Italicizing just one part of a legend label in R in ggplot line graph [duplicate]

enter image description here I would like to just italicize the label 'NA' on the legend of this graph, on ggplot in R. Everything I've tried so far has just italicized the entire legend text, instead ...
DaisyB's user avatar
  • 1
0 votes
3 answers
28 views

How do I convert from a root-EM/REM to a different size/REM, or is this not possible?

I've been given a list of sizes to use in order to redesign a card on our website. We have a root EM of 16px, however I've been given other sizes to use in this card but the other sizes aren't based ...
NobleUplift's user avatar
  • 5,651
0 votes
0 answers
14 views

How do I get MS Powerpoint to display italicised Cyrillic text in Serbian Cursive style?

For me, PowerPoint only displays in Russian cursive style as follows: but I want it to look like this instead:
Ji Yuan Low's user avatar
0 votes
0 answers
57 views

Automatically Adjust Font Metrics to Match a Different Font Using `fonttools`

I have two fonts: font A: open-source font font B: proprietary font whose metrics I'm trying to match. How do I create a replacement font (font C) with the glyphs from font A but with the metrics ...
Gwrgwer Ofgqfrw's user avatar
1 vote
2 answers
249 views

Passing custom palette colors to the color prop in MUI Typography

I'm trying to pass a custom palette color into the color prop of a Typography tag. I've got my theme set up in theme.ts like this: declare module "@mui/material/styles" { interface Palette ...
IanCZane's user avatar
  • 600
0 votes
2 answers
131 views

Change Bold Color in SCSS Script

I'm a beginner struggling with the basic task of changing Bold Text Color in a pre-scripted scss file. I just can't find an obvious solution. The API appears to predefine color parameters and I ...
Bornogo's user avatar
1 vote
1 answer
52 views

How to italicize select words in a ggplot legend?

I have a stacked bar plot with many bars and there are 15 different categories in the legend. I would like only some words of some categories in the legend to be in italics. I think that the answer ...
adelebb's user avatar
  • 13
1 vote
0 answers
45 views

How to implement "text selection" (like default browser behavior on plain HTML text), for SVG paths as text?

I have this Hebrew rendering example, which is a special implementation of text as SVG paths, because we need to stretch each glyph in some cases at specific spots, to justify the text and make it ...
Lance's user avatar
  • 75.4k
0 votes
0 answers
37 views

Space Mono font converts </ to an arrow

I've been trying to use a Space Mono font for my terminal/neovim setup, but I've run into a curious issue where </ is automatically converted to an arrow. Screenshot is from fonts.adobe.com I'd ...
Sam Johnson's user avatar
0 votes
1 answer
75 views

How to get specific character data from text in canvas ? (important in MultiDir: RTL / LTR String)

I have multi-dir text and i want mark Or select some charachter (for sample last char) Sample string : "معنی Hello سلام است یا Salam" Some chars extent the text from Left and some chars ...
Mohsen Tabatabaiee's user avatar
0 votes
0 answers
24 views

Is it ok to hand off to dev typography specs in this convention and not H1 - H6

As a UX/UI designer specific sizes for H1 - H3 cause issues so I prefer to use system shown on the left side of the image. Is this a problem in handoff? It creates much more flexibility. Thanks I ...
Keano's user avatar
  • 1
0 votes
0 answers
91 views

MUI Custom typography in theme

This is not exactly a problem, more of a question. I'm using the responsiveFontSizes that they provide, but when using a custom typography, it doesn't actually get processed by this function. So after ...
zhyp's user avatar
  • 187
0 votes
1 answer
193 views

How can I make type backgrounds in p5.js transparent?

Im having trouble making the background of the letter "A" transparent. you can see the letter "C" doesnt have this issue. here an image displaying this. here is my code: (ignore ...
Pedro Fabra's user avatar
3 votes
3 answers
93 views

Is there a CSS that can render variable height for each character depending on the height of a character?

The CSS below, .message { writing-mode: vertical-rl; text-orientation: upright; font-size: 2rem; } <display class='message'>ㄨㄢˊㄇㄢˇ</display> produces this output. Notice ...
Michael Buen's user avatar
  • 38.7k
2 votes
0 answers
289 views

How to properly use and understand ch units for width in CSS

I've recently in the last week come across a new CSS unit "ch" I haven't seen it before in any of the tutorials I've taken or websites I've inspected and have tried to look up information ...
TherealMIST's user avatar
0 votes
0 answers
36 views

How to use Flutter's built in TextTheme instead of creating our custom themes?

I am noticing this description in Flutter's TextTheme description: Rather than creating a TextTheme directly, you can obtain an instance as Typography.black or Typography.white. at https://api....
giorgio79's user avatar
  • 3,807
1 vote
2 answers
147 views

How to use new line (\n) with italic in ggplot title in R?

I want a plot title that uses italics and two lines. I can't figure out how to make such a title. # Sample data > dput(samp1) structure(list(phase = c("Years 2012-2016", "Years 2012-...
John Polo's user avatar
  • 547
0 votes
1 answer
57 views

How to apply style changes (such as bold, Italic, color, adding bullets, etc) inside a JTable in Java?

I implement a mini word processor using JTextPane in Java. I created a tool bar that makes me be able to bold, underline, and color the texts which the users can input. Now I insert a JTable into this ...
Ying Li's user avatar
0 votes
1 answer
38 views

Is there a way to target all the instances of a specific character using CSS?

I have a client who wants to use a script font (Better Personality Script) for dropcaps. This is problematic, because ten of the font's uppercase letters are different widths, and are positioned ...
Jaemaz's user avatar
  • 35
1 vote
1 answer
120 views

Text position is higher in its bounding box on Firefox vs. other browsers

I've built a layout for a list of items, and I'm running into some line rendering discrepancies between Firefox and other browsers, specifically with my custom font. Firefox renders the text above ...
flatpickles's user avatar
  • 2,208
1 vote
1 answer
42 views

Changing Only Part of the Legend Text

All, I've been struggling to change the legend text of my plots to have the varietal epithet ("paludicola" or "lanceolate") italicized while leaving the abbreviation for variety (&...
Malaxis28's user avatar
0 votes
1 answer
38 views

Is there a way to combine these 3 attributes into 1 line of code?

i am using import { makeStyles } from '@mui/styles' This is my theme typography config enter image description here This is file, i want to combine these 3 attributes into 1 line of code.enter image ...
Dungnv's user avatar
  • 3
1 vote
0 answers
29 views

How do I setup different font styles using apple's typography guidelines for different screen sizes on React Native

I want to change font sizes depending on breakpoints globally through redux, what is the standard way to scale typography for different screen sizes for mobile apps. Can someone please guide me ...
Bilal Nadeem's user avatar
4 votes
0 answers
50 views

How to insert separator between items except when wrapped (in CSS)? [duplicate]

Okay, you’re got a box. You are rendering two (or more items) in the box. Let's assume they are inline (or inline-block) elements. When more than one item appears on the same line, we want to insert ...
Alan H.'s user avatar
  • 16.2k
0 votes
2 answers
83 views

Line is not breaking while using <Typography> in React

Line is not breaking after "Welcome Back". Both Welcome Back! We are happy that you are with us! comes at the same line. I have tried this code, the line is not breaking after "Welcome ...
Adarsh's user avatar
  • 1
1 vote
1 answer
3k views

Override 65ch max-width in Tailwind CSS Typography

I am using a Jekyll template with Tailwind and Typography, and I am interested in overriding the default max-width 65ch limit on each line. The default setting was max-w-prose, and I have tried ...
John Karkas's user avatar
0 votes
1 answer
55 views

Remove the extra space in a link text after break the word

I'm working on a navigation, but in large screen the navigation looks like this, but in laptop view the word is breaking. and it's ok to break the word. but I want to remove the extra space in the ...
Saiful Alam's user avatar
0 votes
0 answers
97 views

Apps Script: Setfont italics for active row based on trigger cell

thanks in advance for any help. I want to trigger italicizing the entire row if column 13 of the row contains "y" (ideally if there is a way to set font as normal if not containing "y&...
Alec Aiken's user avatar
0 votes
0 answers
29 views

What is a format for static documents like PDF but not divided into pages?

PDF is for static documents, so a document is shown the same in different applications, even if it has an unusual layout. But PDF documents are divided into pages because the format is designed for ...
matj1's user avatar
  • 158
0 votes
1 answer
1k views

custom typography does not apply

I am implementing my own typography theming in my angular application, I am trying to replicate the default configuration that comes with the typography components in react mui. At the moment I have ...
jaisemberg2000's user avatar
1 vote
1 answer
62 views

Is Windows font substitution serif aware?

Windows has font substitution logic - if you try to render a character which isn't in the currently selected font, Windows would quietly pull a glyph from another font where a glyph for that character ...
Seva Alekseyev's user avatar
1 vote
2 answers
109 views

How to style a font in bootstrap

I have issue styling my font-family using bootstrap. any help thanks <div class="float-start my-2 f-Arial"> <label for="maleFemale">Gender:</label> <...
wellasomething's user avatar
0 votes
0 answers
18 views

What is the official font-weight for the Overline type scale?

The Overline type scale has different font-weights in different places. In the official specs page, it uses a font-weight of Regular/Normal (400). This is also evident in the mdc-android ...
Kahan Bhalani's user avatar
-1 votes
1 answer
61 views

converting glyphs to SVGs

i'm building a website and wanted to display a bunch of international (pretty obscure) characters on the splashscreen. out of concern for platform-specific system fonts, instead of typing in those ...
German Enik's user avatar
0 votes
1 answer
317 views

Line break on syllables in CSS

CSS has a word-break property that allows words to be split across lines at certain points (e.g. at the first arbitrary character that extends beyond a desired length). But, to my surprise, there does ...
equin0x80's user avatar
  • 303
3 votes
3 answers
128 views

Is there a way to repeat quotation marks at the beginning of each line of text in HTML/CSS?

I am looking for a way to show a quotation mark at the beginning of each line of a quotation. Is there a way to do this in HTML/CSS? In older, pre-20th century typography, quotation marks were often ...
Karel Vissers's user avatar
0 votes
0 answers
485 views

How to re-design input range slider into a circular knob?

So if I have a basic slider input that affects different font parameters. For the time we have raw coded the html so we just have the input sliders with no style, so they are straight. We were ...
ambaamba's user avatar
0 votes
0 answers
87 views

How can I take over the rendering of the HTML generated by Quill

I want to write an online editor for printed documents with advanced typography and layout (2-column, non-web-fonts, etc.). Quill seems unfit for producing that, since it relies on the browser for ...
Gabriel's user avatar
  • 21
1 vote
1 answer
36 views

Any idea why my typography components render normally in localhost, but not on my aws?

I am using typography component for my headings, but they do not render normally when I publish the website. The styles also do not get rendered. It shows normally in npm run dev. but when I push it ...
lams's user avatar
  • 332
1 vote
0 answers
28 views

Not able align items in single when using materialUI grid along with a modal

I am trying to align 3 textfields in a modal in the same line but am not able to do so properly. Either they are going to the next line or are coming as connected without any gap. Here's the code ...
Su So's user avatar
  • 168
1 vote
2 answers
103 views

Eliminate element's trailing space between last word and ::after text content

Is there a way to specify in the CSS that there should be no space between an HTML element's contents and its ::after contents? Obviously I could ask that authors not include a space in the HTML, but ...
Mike Pierce's user avatar
  • 1,390

1
2 3 4 5
15