Font color, size, weight

The font() utility modifies the color, size, weight, case, or alignment of a tag element's text. All arguments default to NULL, in which case they are ignored. For example, font(.., size = "lg") increases font size without affecting color, weight, case, or alignment.

font(tag, color = NULL, size = NULL, weight = NULL, case = NULL, align = NULL)

Arguments

tag	A tag element.
color	One of "red", "purple", "indigo", "blue", "cyan", "teal", "green", "yellow", "amber", "orange", "grey", "black" or "white" specifying the text color of the tag element, defaults to NULL
size	One of "xs", "sm", "base", "lg", "xl" specifying a font size relative to the default base page font size, defaults to NULL.
weight	One of "bold", "normal", "light", "italic", or "monospace" specifying the font weight of the element's text, defaults to NULL.
case	One of "upper", "lower", or "title" specifying a transformation of the tag element's text, default to NULL.
align	A responsive argument. One of "left", "center", "right", or "justify", specifying the alignment of the tag element's text, defaults to NULL.

See also

Other design utilities: active(), affix(), background(), border(), display(), float(), height(), padding(), scroll(), shadow(), width()

Examples

### Changing text color

card(
  header = h3("Important!") %>%
    font(color = "amber"),
  div(
    "This is a reminder."
  )
) %>%
  border(color = "amber")
#> <div class="card border border-amber">
#>   <div class="card-header">
#>     <h3 class="text-amber">Important!</h3>
#>   </div>
#>   <div class="card-body">
#>     <div>This is a reminder.</div>
#>   </div>
#> </div>

### Changing font size

div(
  p("Extra small") %>%
    font(size = "xs"),
  p("Small") %>%
    font(size = "sm"),
  p("Medium") %>%
    font(size = "base"),
  p("Large") %>%
    font(size = "lg"),
  p("Extra large") %>%
    font(size = "xl")
)
#> <div>
#>   <p class="card-text font-size-xs">Extra small</p>
#>   <p class="card-text font-size-sm">Small</p>
#>   <p class="card-text font-size-base">Medium</p>
#>   <p class="card-text font-size-lg">Large</p>
#>   <p class="card-text font-size-xl">Extra large</p>
#> </div>

### Changing font weight

# Make an element's text bold, italic, light, or monospace.

p("Curabitur lacinia pulvinar nibh.") %>%
  font(weight = "bold")
#> <p class="card-text font-weight-bold">Curabitur lacinia pulvinar nibh.</p>

p("Proin quam nisl, tincidunt et.") %>%
  font(weight = "light")
#> <p class="card-text font-weight-light">Proin quam nisl, tincidunt et.</p>